2009-08-26 16 views
17

¿Cómo puedo aplicar una fuente color solo a hipervínculos que ya han sido visited y están siendo hover con el mouse?CSS - a: visitado: hover?

En esencia, lo que quiero hacer es

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

Esto parece funcionar en FF pero no en IE 6. ¿Hay algún problema para IE 6? –

Respuesta

18

Sí que es posible.

He aquí un ejemplo:

<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

Es compatible con todos los navegadores. Parece que no funciona en Firefox 3.5 –

+0

Funcionó para mí en FFox 3.5 e IE7, pero no en IE6. – jimyi

+0

Parece que funciona en FF 3.5. ¿Algún trabajo para IE 6? –

1

hay una secuencia entre el enlace de CSS para tener efecto .. a: hover debe venir después a: link y: visited y a: active debe venir después de un: flotar para más detalles consulte a continuación enlace ..

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

+1

Si bien es un buen consejo en general, no es aplicable a esta pregunta. No hay nada en la pregunta para mencionar el orden (o existencia) de otro pseudo aplicado a un elemento y 'a: visited: hover' es más específico que cualquiera de los selectores que mencionas en la respuesta (y la pregunta no es la la regla no se aplica en IE6, no se trata de anular otras reglas). – Quentin

+0

Querido Quentin, aprecio su comentario, pero la solución que publico es el problema más común que enfrentan muchas personas, incluso yo también enfrento el mismo problema de secuenciación después de corregirlo y lo publiqué porque otras personas no enfrentan el mismo problema. – user3110896

+0

Si bien es un problema común, no es el problema el que se le pregunta. – Quentin

0

Fwiw, yo era incapaz de estilo apenas color en a:visited:hover (cromo/FF) sin declarar un fondo para :link:hover (cualquier cosa que no sea none o inherit parece funcionar, utilicé rgba() como alfa sake).

para que esto funcione en Chrome/FF:

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

... (algo así), esta debe estar presente:

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

Hay una orden de la declaración CSS para que esto funcione correctamente como se mencionó anteriormente, aunque no cubrió esta opción en particular, hace la diferencia. He probado esto en Chrome.

El orden es

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

que va a funcionar si se trata antes o después de un: hover siempre y cuando ambos a: hover y a: visited: activable están después de un: cuentan antes de que un activo. Solo prefiero mantener los dos enlaces visitados juntos y los dos suspendidos juntos.

Cuestiones relacionadas