CSS悬停在classList上

Question

我有类 .tab 的元素并将它们悬停在其中：

.tab:hover {
    background-color: #A9E59E;
}

现在，我正在为JS中的一些元素添加额外的类：

this.classList.toggle('tab2');

问题是，我不会徘徊在两个类的元素上 classList.length＆gt; 1 即可。
CSS中是否有一种方法可以使用两个类排除这些元素，因此悬停仅在 .tab 类上触发，而不在 .tab .tab2 上触发 或者我需要将所有悬停逻辑移动到JS？

Answer 1

如果你可以使用CSS3：not选择器可以帮助你实现你的目标：

.tab:not(.tab2):hover {
    background-color: #A9E59E;
}

否则，您必须为具有两个类的元素定义新规则才能重置背景颜色：

.tab:hover {
    background-color: #A9E59E;
}
.tab.tab2:hover {
    background-color: white; (or whatever your initial background color was)
}

Answer 2

您是否看过:not选择器？

您可以尝试这样的事情：

.tab:not(.tab2):hover {
    background-color: #A9E59E;
}

Answer 3

试试这种语法。

    [class="tab"]:hover{
background-color: #A9E59E;
}

如果它有其他类属性，它将选择类选项卡。

Answer 4

您可以为2个类添加另一个显式规则

.tab.tab2:hover {
  background-color: #someothercolor;
}

Answer 5

我会做这样的事情：

.tab.tab2:hover{
/*apply the same style as for the non hover element */
}

Answer 6

我们可以使用

删除悬停效果

$(element).removeClass('hover');

因此，在切换课程时，我们也可以切换悬停

element.classList.toggle("tab2");
element.classList.toggle("hover");