Jorge Vallejo Blog

Blog del creativo, ilustrador y profesor de videojuegos Jorge Vallejo

Cambiar color de fila en tabla con css2.

Pasa el ratón por encima de la tabla

Nombre Científico Nombre Común
Agaricus macrosporus Champiñon gigante
Aleuria aurantia Peziza anaranjada
Amanita caesarea Oronja, Huevo de rey

Para cambiar el color las filas de esta tabla cuando el ratón se situa encima, podriamos hacerlo mediante javascript, cambiando la clase en el evento onmouseover y recuperandola en el evento onmouseout.
Sin embargo a partir del CSS2 podemos utilizar pseudoclases en más elementos que en el a, es decir, en vez de utilizar las clasicas clases:
a:link { color: red; } /* enlace no visitado*/
a:visited { color: blue; } /* enlace visitado */
a:active { color: lime; } /* enlace activo (pulsado) */
a:hover {color: red; } /* ratón en el enlace, sin pulsar. */

Podemos usar pseudoclases en otros elementos como el tr:
tr.miclase:hover{
background-color:#FFD52B;
}
De esta forma tan sencilla, cuando el ratón se situe encima de la fila cambiará el color, sin embargo solo funcionará, en firefox y explorer a partir de la versión 7.
Las pseudoclases nos proporcionan nuevas posibilidades de interacción sin javascript.
Más pseudoclases :first-child :link :visited :hover, :active :focus y :lang

Leave a Reply

Your email address will not be published. Required fields are marked *