CSS Bootstrap停止活动项目上的悬停边框

Question

如何停止两次应用边框...一次用于活动项目，一次用于悬停？

我尝试使用.navbar a:not(.active):hover，但它不起作用。我也试过给所有导航条项目一个底部边框，它具有所需的厚度，但背景颜色和更改悬停时的颜色。

期望的效果是活动项目以粗体显示并且具有白色bottom-border，而鼠标所在的项目也具有白色bottom-border（在图像中以红色显示）但是不是大胆的（因为两种颜色都是白色的我不会为哪一个'赢'而烦恼）。但我的问题是，当鼠标悬停在活动项目上时，bottom-border会被添加两次。

Answer 1

这很可能是由于边框应用于2个不同的元素。

我让你fiddle了解这个问题。

正如您所看到的，所有这些都正常工作，因为.active类和：hover伪类都被引用到ul＆gt;李。

ul > li.active{
  border-bottom:3px solid red;
}

ul > li:hover{
  border-bottom: 3px solid yellow;
}

如果您尝试更改：hover to ul＆gt; li>你看到了双边框。

ul > li.active{
  border-bottom:3px solid red;
}

ul > li > a:hover{
  border-bottom: 3px solid yellow; /* double border */
}