javascript - CSS 悬停在 classList 上

Question

我有 .tab 类的元素并为它们悬停:

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

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

this.classList.toggle('tab2');

问题是，我不想将鼠标悬停在具有两个类的那些元素上
classList.length > 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)
}