html - 防止css：悬停在元素上

Question

假设我有这个 HTML：

<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>

有了这个 CSS

.SomeClass{color:blue;}
.SomeClass:hover{color:red}

我希望悬停效果不适用于SomeIDdiv。我可以用 jQuery 做到这一点，但我想知道是否有更简单的方法可以只用 CSS 来做到这一点。

感谢您的建议。

score 4 · Accepted Answer

CSS是按顺序解析的，这意味着如果在你定义之后

.SomeClass:hover { color: red; }

然后定义一个规则

#SomeId.SomeClass:hover { color: blue; }

那应该“覆盖”最初的color: red;

score 3 · Accepted Answer

只需将另一个规则分配给 id 为 SomeID 的 div。这将覆盖另一条规则。

.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}

score 1 · Accepted Answer

只需覆盖样式：

#SomeID:hover {
    color:blue;
}

或者，您可以使用：

.SomeClass:not(#SomeID):hover {
    color:red;
}

然后更容易改变它，但更少的浏览器支持。

score 0 · Accepted Answer

让我们看一下链接伪类的特殊性：

记住：LAHV ( :link, :active, :hover, :visited)。

首先，为了正确级联，让我们将以下内容分配给.SomeClass：

.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }

接下来，让我们指定#SomeID：

#SomeID:hover { color: blue; }

id总是优先于class.

4 回答 4