2009-04-05 10 views
4

Si j'ai ce CSS:Pourquoi a: hover est-il surchargé en CSS?

a:link { color: blue; } 
a:hover { color: red; } 
#someID a:link { color: black; } 

Liens sous l'ID apparaît toujours en noir sur le vol stationnaire. Je suis conscient que l'utilisation d'un ID donne une priorité plus élevée, cependant, je ne remplace pas le sélecteur :hover, seul le sélecteur :link, donc le hover ne devrait pas s'afficher en rouge?

Répondre

10

La classe :link pseudo applique au lien, même lorsque vous êtes en vol stationnaire au-dessus. Comme le style avec l'identifiant est plus spécifique, il remplace les autres. La seule raison pour laquelle le style :hover remplace le style :link est qu'il apparaît plus tard dans la feuille de style. Si vous les placez dans cet ordre: le style

a:hover { color: red; } 
a:link { color: blue; } 

le :link est plus tard dans la feuille de style et remplace le style :hover. Le lien reste bleu lorsque vous passez la souris dessus.

Pour rendre le travail de style :hover pour le lien noir vous devez le faire au moins aussi précis que le style :link, et placez-après dans la feuille de style:

a:link { color: blue; } 
a:hover { color: red; } 
#someID a:link { color: black; } 
#someID a:hover { color: red; } 
+0

Merci pour info. J'ai en fait décidé d'utiliser une règle importante sur le survol d'origine pour remplacer les règles suivantes. Cela m'évite d'avoir à ajouter #someID a: hover {color: red; } chaque fois qu'un lien est remplacé. – DisgruntledGoat

-2

Il y a un problème d'ordre, comme expliqué dans W3Schools:

Note: a: hover doit venir après un: lien et a: visited dans la définition CSS dans pour être efficace !!

Note: a: actif DOIT venir après: a hover dans la définition CSS afin d'être effective !!

http://www.w3schools.com/CSS/css_pseudo_classes.asp

+0

réordonner les styles ne suffit pas pour faire fonctionner le: hover pour le lien noir. – Guffa

+0

Peut-être incomplète (doit également avoir la même priorité en CSS), mais pas du tout. Ce comportement est décrit dans les normes W3C. – Gerardo

+1

FYI http://www.w3fools.com/ –