éviter css: hover sur un élément

Question

Supposons que j'ai ce HTML:

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

avec ce CSS

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

Je veux l'effet hover de ne pas appliquer à la SomeID div. Je peux le faire avec jQuery mais je me demandais s'il y avait un moyen plus simple de le faire avec juste CSS.

Merci pour vos suggestions.

Answer 1

CSS est analysé afin, ce qui signifie que si après avoir défini

.SomeClass:hover { color: red; } 

Vous définissez ensuite une règle

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

Cela devrait 'remplacer' l'initiale color: red;

Answer 2

Affectez simplement une autre règle à la div avec un identifiant de SomeID. Cela remplacera l'autre règle.

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

jsFiddle example

Answer 3

Juste remplacer le style:

#SomeID:hover { 
    color:blue; 
} 

Alternativement, vous pouvez utiliser:

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

Ensuite, il est plus facile de le changer, mais moins de soutien du navigateur.

Answer 4

Jetons un coup d'oeil à la spécificité lien pseudo-classe:

Rappelez-vous: LAHV (:link, :active, :hover, :visited).

Tout d'abord, afin de bien en cascade, Assignons ce qui suit à .SomeClass:

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

Ensuite, nous allons préciser #SomeID:

#SomeID:hover { color: blue; } 

id a toujours la priorité sur class.