Question

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

这是我的鼠标悬停：

>>> import re
>>> apples.sort(key=lambda x: int(re.findall('\d+', x)[0]))
>>> apples
['2 The Yellow Apples ', '7 The Red Apples ', '15 The Green Apples ', '43 The Blue Apples ', '178 The Purple Apples ']
>>>

这是我活动的li课：

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

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

Answer 1

您有一个特殊性问题。通常，这是通过在目标元素本身上使用类名称来解决的，而不是像subscription那样选择“让我们一直遍历DOM”。因此，要解决此问题，您可以向每个.tabs nav li.active a元素中添加一个类名，例如.navigation-link。避免此问题的一种广受欢迎的CSS方法是BEM。看一下这个问题：Points in CSS specificity

Answer 2

您可以简单地执行以下操作：

.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;
}

希望有帮助。

Answer 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，情况并非如此。

CSS使悬停覆盖活动类

3 个答案: