2009-08-26 9 views
17

Comment puis-je appliquer une police color uniquement aux hyperliens qui ont déjà été visited et qui sont hover avec la souris?CSS - a: visité: hover?

Essentiellement, ce que je veux faire est

a:visited:hover {color: red} 
+0

Cela semble fonctionner dans FF mais pas IE 6. Un travail autour de IE 6? –

Répondre

18

Oui, cela est possible.

Voici un exemple:

<style type="text/css"> 
    a:link:hover {background-color:red} 
    a:visited:hover {background-color:blue} 
</style> 

<a href="http://www.google.com/">foo</a><a href="http://invalid/">bar</a> 
+0

Est-il pris en charge dans tous les navigateurs. Ne semble pas fonctionner dans Firefox 3.5 –

+0

A travaillé pour moi sur FFox 3.5 et IE7, mais pas IE6. – jimyi

+0

On dirait que cela fonctionne en FF 3.5. Tout travail autour de IE 6? –

1

il y a une séquence entre lien css pour prendre effet .. a: hover doit venir après: lien et a: visited et: actif doit venir après: vol stationnaire pour plus de détails consultez lien ci-dessous ..

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

+1

Bien que ce soit un bon conseil en général, il ne s'applique pas à cette question. Il n'y a rien dans la question pour mentionner l'ordre (ou l'existence) d'un autre pseudo appliqué à un élément et 'a: visited: hover' est plus spécifique que l'un des sélecteurs que vous mentionnez dans la réponse (et la question n'est pas la règle ne pas appliquer dans IE6, pas à ce sujet outrepassant d'autres règles). – Quentin

+0

Cher Quentin j'apprécie votre commentaire mais la solution que je poste est le problème le plus commun qui est confronté par beaucoup de gens même je fais face au même problème de séquençage après que je le corrige et je l'ai posté parce que d'autres personnes ne rencontrent pas le même problème. – user3110896

+0

Alors que c'est un problème commun, ce n'est pas le problème posé. – Quentin

0

FWIW, je ne pouvais pas le style juste color sur a:visited:hover (Chrome/FF) sans déclarer un fond pour :link:hover (tout autre que none ou inherit semble fonctionner, j'ai utilisé rgba() pour l'alpha).

Pour que cela fonctionne dans Chrome/FF:

a:visited:hover { 
    color: #f00; 
} 

... (quelque chose comme) il doit être présent:

a:link:hover { 
    background-color: rgba(255, 255, 255, 0); 
} 
1

Il y a un ordre de déclaration css pour que cela fonctionne correctement Comme cela a été mentionné précédemment, même si cela ne couvre pas cette option particulière, cela fait une différence. J'ai testé cela sur Chrome.

L'ordre est

a:link { color: red; } 
    a:visited { color: blue; } 
    a:visited:hover { color: yellow; } 
    a:hover { color: green; } 
    a:active { color: gray; } 

Il fonctionnera si elle vient avant ou après: hover aussi longtemps que les deux a: hover et a: visited: hover sont après: visited et avant: actif. Je préfère juste garder les deux liens visités ensemble et les deux voltigeurs ensemble.