Html CSS底部边框悬停“;“抖动”;
我有一个导航栏,当你将鼠标悬停在导航按钮上时,我想给你一个橙色的底部边框。唯一的问题是,每当您悬停时,边框都会使内容/导航按钮“抖动”,这是它们不应该的。此外,我已经有一个黑色的底部边界上的导航栏在任何时候,所以它不会工作,以改变这一点 HTML:Html CSS底部边框悬停“;“抖动”;,html,css,colors,hover,border,Html,Css,Colors,Hover,Border,我有一个导航栏,当你将鼠标悬停在导航按钮上时,我想给你一个橙色的底部边框。唯一的问题是,每当您悬停时,边框都会使内容/导航按钮“抖动”,这是它们不应该的。此外,我已经有一个黑色的底部边界上的导航栏在任何时候,所以它不会工作,以改变这一点 HTML: 抖动似乎是由于在悬停时在底部添加额外的2px边框造成的。这会使文本上升一点。要解决此问题,请将#navBarTop li a更改为以下内容,以确保始终存在2px边框: #navBarTop li a { display: block;
抖动似乎是由于在悬停时在底部添加额外的2px边框造成的。这会使文本上升一点。要解决此问题,请将
#navBarTop li a
更改为以下内容,以确保始终存在2px边框:
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #00ffff;
border-bottom: 2px solid transparent; // <--- add this line
}
#navBarTop li a{
显示:块;
填充:10px 25px;
文字装饰:无;
字体系列:“Arial”;
颜色:#00ffff;
边框底部:2倍纯色透明//
#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;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #00ffff;
border-bottom: 2px solid transparent; // <--- add this line
}