CSS使悬停覆盖活动类答案

【问题标题】：CSS make hover override active classCSS使悬停覆盖活动类
【发布时间】：2018-07-14 04:59:25
【问题描述】：

我想让我的悬停颜色覆盖我的活动类颜色。

这是我的悬停：

.tabs nav a:hover {
    box-shadow: inset 0 -2px #1E528A;
}

这是我的活动 li 课程：

.tabs nav li.active a {
    box-shadow: inset 0 -2px #3792F5;
}

当我将鼠标悬停在我的活动类上时，颜色优先。我希望悬停在悬停时优先于我的活动类颜色。我该怎么做？

【问题讨论】：

您是否尝试过在 .css 文件或 <style> 标签中切换它们的位置？有时，您编写 CSS 的顺序会有所不同
使用特异性：添加.tabs nav li:active a:hover并将其设置为与您的其他悬停相同。

标签： css

【解决方案1】：

你可以这样做：

.tabs nav a:hover,
.tabs nav li.active a:hover {
    box-shadow: inset 0 -2px #1E528A;
}

或使用重要的：

.tabs nav a:hover {
    box-shadow: inset 0 -2px #1E528A !important;
}

希望对你有帮助。

【讨论】：

谢谢！这有帮助:)

【解决方案2】：

你有一个特异性问题。通常，这是通过在目标元素本身上使用类名来解决的，而不是像.tabs nav li.active a 这样的“让我们一直遍历 DOM”选择器。因此，要解决此问题，您可以为每个 <a> 元素添加一个类名，例如 .navigation-link。一种普遍推荐的避免此问题的 CSS 方法是BEM。看看这个问题：Points in CSS specificity

【讨论】：

【解决方案3】：

你可以这样做：

.tabs nav li.active a:hover {
    box-shadow: inset 0 -2px #3792F5;
}

它应该可以工作，但是它太通用了，您需要指定所有嵌套的选择器。正如评论中所建议的，您可以使用描述性的类名，例如：

a.menuLink:hover {
   box-shadow: inset 0 -2px #3792F5;
}

通过这种方式，您只需要使用正确的类来定位您的 a 元素。

最后，避免使用!important，这是一种不好的做法。仅当您没有任何其他选项时才应使用 !important，但情况并非如此。

【讨论】：