quede - hover css imagen

establecer un enlace: visitado al mismo estado que a: enlace y a: hover

Question

Estoy trabajando en una idea en la que mi enlace a: tiene un estado (azul, sin subrayado, etc.) con aa: hover siendo blanco. Quiero que mis enlaces visitados tengan el mismo estado que a:link y a:hover . es posible? compatible con los navegadores más comunes?

Answer 1

A continuación, le mostramos cómo puede diseñar las etiquetas a (normales y visitadas) y diseñar el vuelo estacionario por separado.

a
{
color:#6c7492;
font-weight:bold;
text-decoration:none;
}
a:hover
{
border-bottom:1px solid #6c7492;
}

Answer 2

El método mnemotécnico que me enseñaron para recordar en qué orden colocar tus enlaces CSS es "LoVe HAte": enlace, visitado, desplazado, activo.

Adherirse: centrarse allí, por lo general, tampoco es una mala idea.

Por supuesto, si está haciendo que todos los estados de un enlace tengan el mismo aspecto al enumerar selectores con comas, entonces el orden no importa.

Answer 3

Es completamente posible, como señala Sblundy. Sin embargo, si realiza una regla como esa, ya no habrá ninguna indicación visual de que el usuario está pasando el ratón sobre un enlace que se visitó previamente.

Además, recuerde especificar las reglas en este orden:

a:link { }
a:visited { }
a:hover { }
a:active { }

De lo contrario, puede tener resultados inesperados porque todas estas reglas tienen la misma especificidad. El orden es importante.

EDITAR: CSS2 permite encadenar pseudo-clases. Esto podría usarse para solucionar el problema de usabilidad [potencial] que crea su solicitud.

a:visited:hover { }

Sin embargo, no sé si esta convención es ampliamente compatible.

Answer 4

Si usas esas pseudo clases, no veo por qué no.

a:visited, a:hover {
...
}

Answer 5

a, a:link, a:hover, a:visited, a:active {text-decoration: none; color: blue;}

debería funcionar en todos los navegadores habilitados para CSS, aunque esta es una mala idea (actualmente fuera de línea, Google Cache )

Para hacer que a:hover blanco, elimínelo de la regla anterior y cree una regla especial para él o agregue solo:

a:hover {color: white !important;}