CSS Bootstrap 停止事件元素上的悬停边框

Question

如何停止应用两次边框...一次用于事件元素，一次用于悬停？

我试过使用 .navbar a:not(.active):hover 但它不起作用。我还尝试为所有导航栏元素提供一个底部边框，该边框具有所需的厚度但具有背景颜色，并在悬停时更改颜色。

期望的效果是事件元素以粗体显示并具有白色 bottom-border，而鼠标悬停的元素也具有白色 bottom-border (图中以红色显示)但不是粗体(因为两种颜色都是白色，所以我不关心哪个“获胜”)。但我的问题是，当鼠标悬停在事件元素上时，bottom-border 被添加了两次。

Answer 1

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

我给你做了一个fiddle了解问题。

如您所见，一切正常，因为 .active 类和 :hover 伪类都引用了 ul > li。

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

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

例如，如果您尝试将 :hover 更改为 ul > li > a，您会看到双边框。

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

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