在活动时禁用悬停 link

Question

我正在尝试弄清楚如何不使用悬停覆盖活动 link。

<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>

在活动时禁用悬停 link

Disable hover on active link

hyperlink

hover

disable