hyperlink - 在活动链接上禁用悬停

Question

我试图弄清楚如何不使用悬停覆盖活动链接。

<style>
.primary-nav-wrapper nav a:active, .primary-nav-wrapper nav .active>a  {
    border-bottom: 3px solid #4F579D;}
.primary-nav-wrapper nav a:hover:not([active]) {border-bottom: 3px solid #DFE1E5;}
</style>

Answer 1

我没有你的代码，所以我不能充分地帮助你，但我会尽力的。

我认为您的 CSS 存在根本问题。我想你想要这个：

• 悬停时，给a灰色边框。
• 如果处于活动状态，请给出a蓝色边框。
• 如果有人悬停并激活a，它应该仍然是蓝色的。

如果这是您的问题，这里有一个工作代码：

.primary-nav-wrapper nav a:hover  {
    border-bottom: 3px solid #DFE1E5;
}
    
.primary-nav-wrapper nav a:hover:active {
  border-bottom: 3px solid #4F579D;
}

<div class="primary-nav-wrapper">
  <nav class="active">
    <a>test</a>
  </nav>
  <nav class="active">
    <a>test</a>
  </nav>
  <nav class="active">
    <a>test</a>
  </nav>
</div>