CSS底部边框悬停“抖动" [英] CSS bottom border hover "jitter"
问题描述
我有一个导航栏,当您将鼠标悬停在导航按钮上时,我想给出一个橙色的底部边框.唯一的问题是,每当您将鼠标悬停时,边框都会使内容/导航按钮抖动",这是不应该的.另外,我一直都在导航栏上有一个黑色的底部边框,因此无法更改它.
I have a navigation bar which I would like to give an orange bottom border when you hover over the navigation buttons. Only problem is that whenever you hover, the border makes the content/navigation buttons "jitter" which they aren't supposed to. Also I already have a black bottom border on the navigation bar at all times so it wont work to change that.
HTML:
<div id="navBarTop">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
CSS:
#navBarTop {
padding: 0;
background-image: url('navBarBackground1.png');
border-bottom: 1px solid #4c4c4c;
position: absolute;
bottom: 0;
text-align: center;
left: 0;
right: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#navBarTop li {
display: inline-block;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #ffffff;
}
#navBarTop li a:hover {
border-bottom: 2px solid #FF8000;
}
推荐答案
抖动似乎是由于悬停时在底部添加了额外的2px边框引起的.这会使文本稍微升高一点.要解决此问题,请通过将您的 #navBarTop li a
更改为此,确保始终有2px边框:
The jittering seems to be caused by adding the extra 2px border at the bottom when you hover. That causes the text to rise up a bit. To fix this, make sure there's always a 2px border by changing your #navBarTop li a
to this:
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #00ffff;
border-bottom: 2px solid transparent; // <--- add this line
}
那应该为您稳定事情.
这篇关于CSS底部边框悬停“抖动"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!