我想創建一個帶有 HTML 和 CSS 的導航欄，當我將滑鼠游標懸停在每個專案上時，我希望在專案下方出現一條小線（如邊框底部），過渡時間為 0.2 秒。我希望該行從右到左出現我搜索過，我發現我應該使用以下代碼：
transition : width time ;
喜歡
transition : width 0.2s ;
但是當我使用此代碼時，“寬度”不起作用且未定義。你能幫我嗎？
body
{
background-color: gray;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
ul
{
list-style-type: none;
margin: 0;
padding:0;
overflow: hidden;
background-color: #333;
border-radius: 50px;
width: 90%;
}
li
{
float: left;
transition:width 0.2s;
}
li a
{
display: block;
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
padding: 15px 20px;
}
.searchbtn
{
float: right;
}
li:hover
{
background-color: rgb(43, 43, 43) ;
border-bottom: 3px solid white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Title</title>
<link rel="icon" type="icon/x-type" href="IMG/fav.png">
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
<li class="searchbtn"><a href="#">Search</a></li>
</ul>
</body>
</html>uj5u.com熱心網友回復：
不幸的是，我們不能影片（或設定）邊框的寬度。所以我們需要另一種方式。
使用 CSS，您可以創建偽元素，例如::before和::after在另一個元素內創建塊。對于你的情況，我們可以使用上述偽元素，打造一個像邊界在每個的底部欄li。
然后可以像常規 HTML 元素一樣為該欄設定影片。這意味著我們可以更改寬度、高度、顏色等，但仍使其看起來像邊框。
在下面的示例中，我在::after元素上使用了psuedo 元素在li串列項中創建了類似邊框的元素。我已經使用::after，因為邊界必須經過的內容li。
元素開始于scaleX操作偽元素水平尺寸的變換。每當您懸停時，scaleX它都會恢復到全寬。
使用transform而不是的width原因transform是針對過渡和影片進行了優化，盡管沒有禁止過渡的法律width。
body {
background-color: gray;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-radius: 50px;
width: 90%;
}
li {
/**
* This needs to be position: relative so that the ::after element
* will stay be relative to the size of this element.
* Try to remove it and see what happens.
*/
position: relative;
float: left;
transition: border-color 0.2s;
}
li:hover {
background-color: rgb(43, 43, 43);
}
li a {
display: block;
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
padding: 15px 20px;
}
li::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
transform-origin: right center;
transform: scaleX(0);
transition: transform 0.2s;
background-color: white;
z-index: 1;
}
li:hover::after {
transform: scaleX(1);
}
.searchbtn {
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Title</title>
<link rel="icon" type="icon/x-type" href="IMG/fav.png">
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
<li class="searchbtn"><a href="#">Search</a></li>
</ul>
</body>
</html>旁注：您正在使用一些舊技術，例如float，來定位您的元素。這些技術已經被Flexbox和CSS Grid Layout超越，它們為您提供更多（更好）的布局控制。因此，我建議您研究上面的兩個鏈接，并找到有關創建布局的最新教程（YouTube 中介紹了有關 Flexbox 和 Grid 的內容）。
uj5u.com熱心網友回復：
向寬度的過渡沒有做任何事情，因為您永遠不會改變“li”元素的寬度。“transition”屬性的作業方式是通過影片更改您選擇的屬性。如果你想在懸停時更改文本顏色并有一個很好的過渡，你可以這樣做：
span {
color: #000;
transition: color 0.2s;
}
span:hover {
color: #ccc;
}
我認為您可以使用“after”偽選擇器通過模擬底部邊框來實作您想要的效果。由于您無法直接修改邊框的長度。
這是一個作業示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396001.html
標籤：javascript html 查询 css bootstrap-4
上一篇：在應用flexbox時遇到問題