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 */
}