实时示例:https://jsfiddle.net/qnx8btw5/
当我将鼠标悬停在其他元素上时,导航栏中的<li>
正在移动。如何阻止这种情况的发生?
我知道我可以在将大小悬停时将大小设置为可以阻止这种情况发生,但是我认为这不是解决此问题的最佳方法。
答案 0 :(得分:3)
我认为这是因为您将鼠标悬停在列表项上时将边框设置为底部。
默认情况下,您可以为列表项设置透明边框,如下所示:
#navbar-container ul li{
border-bottom:3px solid transparent;
}
使用此功能,您的导航栏将不会移动。
答案 1 :(得分:2)
由于边界悬停而发生。只需将透明颜色的边框设置为元素transparent
的默认值即可。
答案 2 :(得分:2)
默认情况下,将hover
上的边框添加为transparent
边框。这样,样式就不会在“默认”和悬停之间改变。
答案 3 :(得分:0)
我把这个交给你css,它停止了运动。
li {
float: left;
color: $ColorStandard;
text-align: center;
margin-left: 12.5px;
margin-right: 12.5px;
margin-bottom: 12.5px;
margin-top: 12.5px;
font-size: $FontSizeMedium;
text-decoration: none;
cursor: pointer;
a {
text-decoration: none;
color: $ColorStandard;
&:hover {
border-bottom-color: $ColorStandard;
border-bottom-style: solid;
border-bottom-width: 3px;
}
}
答案 4 :(得分:0)
add border bottom in li
css.
$DefaultFont: "Roboto", "Open Sans";
$ColorStandard: #212121;
$ColorSubordinate: #A7ADB6;
$FontSizeMedium: 13.5pt;
#header-container {
position: absolute;
top: 0;
z-index: 999;
margin-top: 0;
background-color: white;
}
#navbar-container {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: $ColorSubordinate;
border-top-width: 1px;
border-top-style: solid;
border-top-color: $ColorSubordinate;
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
li {
float: left;
color: $ColorStandard;
text-align: center;
margin-left: 12.5px;
margin-right: 12.5px;
margin-bottom: 12.5px;
margin-top: 12.5px;
border-bottom:3px solid transparent;
font-size: $FontSizeMedium;
text-decoration: none;
cursor: pointer;
a {
text-decoration: none;
color: $ColorStandard;
}
&:hover {
border-bottom-color: $ColorStandard;
border-bottom-style: solid;
border-bottom-width: 3px;
width:100px;
}
}
}
}
#data-container {
margin-top: 20px;
z-index: 1;
}