Trucos CSS, links que cambian

Dentro de la serie de trucos que os vamos a ofrecer sobre CSS hoy destacamos éste sobre los links y sus cambios de estado con CSS, muy interesante.

Conociendo todos los estados que puede tener un links el juego con CSS tiene muchas posibilidades pero hay que seguir unas normas «no oficiales» para que funcionen bien en todos los navegadores, por ello os ofrecemos un truco muy eficaz:

Los enlaces tienen varios estados que son los siguientes:

link sin visitar (“normales”)
hover (cuando pasamos el cursor del ratón por encima)
active (cuando hacemos clic)
visited (cuando ya hemos ido a esa dirección).

Estos estados se corresponden a pseudoelementos, y podemos cambiar la apariencia de los enlaces con CSS. Sin embargo, algunos navegadores tienen un bug que, dependiendo del orden en el que escribamos las reglas, se mostrará el resultado correctamente o no.
¿Cómo lo solucionamos? Pues LoVe/HAte. Es un mnemotécnico que nos ayudará a recordar el orden en el que estas reglas funcionan bien en cualquier navegador:

L –> link
o
V –> visited
e
H –> hover
A –> active
t
e

Quedaría así:

/ *   l i n k s   n o r m a l e s   * /
a : l i n k   {
t e x t - d e c o r a t i o n :   n o n e ;
c o l o r :   # 0 0 a ;
}

/ *   v i s i t a d o s   * /
a : v i s i t e d   {
c o l o r :   # a 0 0 ;
}

/ *   h o v e r   * /
a : h o v e r   {
t e x t - d e c o r a t i o n :   u n d e r l i n e ;
}

/ *   a c t i v o s   * /
a : a c t i v e   {
f o n t - w e i g h t :   b o l d ;
}

Lo que hace el código anterior es poner los enlaces de color azul marino y sin subrayado. Cuando pasamos el cursor por encima, aparece el subrayado. Al hacer clic, el texto del enlace se pone en negrita. Los enlaces que ya hemos visitado aparecen de color granate.

Fuente: http://cafeina.ladybenko.net

Sección –> Internet –> Webmaster –> Trucos CSS