Css 引导4悬停在导航栏链接上会导致闪烁

每当我将鼠标悬停在导航栏链接上时，我希望使它们的背景颜色更暗。它工作正常，但当我更改填充（在本例中为0px）时，它开始闪烁：（全屏查看以获得更好的效果） 此外，图像链接与其他链接的高度不同（折叠时，它有一个右空格），使用当前的样式规则，我无法将其放在同一行中

**编辑：这是由于

填充：0px！重要信息

，但这是因为我不希望悬停背景占据整个高度。如何使悬停背景的高度更小

navbar先生{
最小高度：80px；
字体大小：0.8rem；
字号：500；
}
.navbar品牌{
填充：0 15px；
高度：80px；
线高：80px；
}
.导航栏切换{
/*（80px-按钮高度34px）/2=23px*/
利润上限：23px；
填充：9px 10px！重要；
}
@介质（最小宽度：768px）{
.导航栏导航>李>a{
/*（80px-线路高度为27px）/2=26.5px*/
衬垫顶部：26.5px；
垫底：26.5px；
线高：27px；
}
}
.底部空间{
边缘底部：20px；
}
#导航栏\u已登录\u>a:链接{
颜色：白色；
}
#导航栏\u已登录\u>a:悬停{
不透明度：0.7；
}
#导航栏\u登录\u>a：已访问{
颜色：白色；
}
#导航栏已登录>li.nav-link{
颜色：白色；
}
.nav-pills.nav-link.active、.nav-pills.show>.nav-link{
背景色：#17A2B8；
}
身体{
填充顶部：110px；
}
.主导航a:悬停{
背景色：#0D47A1！重要；
填充：0px！重要；
}  










悬停中的填充导致问题：
填充：10px！重要的



navbar先生{
最小高度：80px；
字体大小：0.8rem；
字号：500；
}
.navbar品牌{
填充：0 15px；
高度：80px；
线高：80px；
}
.导航栏切换{
/*（80px-按钮高度34px）/2=23px*/
利润上限：23px；
填充：9px 10px！重要；
}
@介质（最小宽度：768px）{
.导航栏导航>李>a{
/*（80px-线路高度为27px）/2=26.5px*/
衬垫顶部：26.5px；
垫底：26.5px；
线高：27px；
}
}
.底部空间{
边缘底部：20px；
}
#导航栏\u已登录\u>a:链接{
颜色：白色；
}
#导航栏\u已登录\u>a:悬停{
不透明度：0.7；
}
#导航栏\u登录\u>a：已访问{
颜色：白色；
}
#导航栏已登录>li.nav-link{
颜色：白色；
}
.nav-pills.nav-link.active、.nav-pills.show>.nav-link{
背景色：#17A2B8；
}
身体{
填充顶部：110px；
}
.主导航a:悬停{
背景色：#0D47A1！重要；
}  










之所以会出现闪烁，是因为当您悬停时，正在移除填充，从而将元素从光标下方拉出。然后停止悬停并重新应用填充，将其放回光标下，触发悬停状态。冲洗并重复

要停止闪烁，您需要这两种样式协同工作：

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 26.5px;
        padding-bottom: 26.5px;
        line-height: 27px;
    }
}

.main-nav a:hover {       
    background-color: #0D47A1!important;
    padding: 0px!important;

}

如果希望悬停背景的高度较小，请将不希望背景的部分替换为边距。这可能看起来像：

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding: 6.5px 8px; /* top/bottom, sides */
        margin: 20px 0px;
        line-height: 27px;
    }
}

.main-nav a:hover {       
    background-color: #0D47A1!important;
}

简言之，不要在悬停时更改方框大小，如果您不需要背景，请使用
边距
而不是
填充
我知道，但我确实希望它的填充更少（我不希望悬停的背景占据整个高度。另外，你可以看到图像与常规链接不在同一条线上？为什么？谢谢，它成功了！顺便说一句，你知道为什么图像与常规链接不对齐吗？或者我应该发布一个新问题？你应该添加一个新问题，将虚拟图像作为当前序列号IPET包含断开的链接。