:hover, :active y :focus son las llamadas pseudo-clases dinámicas, ya actuan a partir del comportamiento del usuario.

Evidentemente, sobra decir que estas pseudo-clases solo son relevantes en medios interactivos, si estamos escribiendo nuestra hoja de estilos para impresión, casi que no hace falta. (Si alguna vez veo como se resalta un enlace en una hoja de papel, al pasar el dedo por encima, me muero del susto)

La pseudo-clase :hover se aplica cuando el usuario apunta a un elemento (usualmente con el ratón) pero no llega a activarlo. Es lo que en mi pueblo se llama pasar el ratón por encima

La pseudo-clase :active se aplica cuando el elemento esta siendo activado por el usuario, por ejemplo, en el intervalo de tiempo que va desde que pinchamos un botón y lo soltamos, o cuando pulsamos en un enlace para cargar una página en un marco.

y la pseudo-clase :focus es activada cuando un elemento recibe el foco de ventana, mediante un evento de teclado (ver atributo tabindex) o de ratón (pinchamos en una caja de texto)

Puedes ver las tres pseudo-clases en funcionamiento en este ejemplo

Las pseudo-clases dinámincas no son excluyentes entre si, esto quiere decir que un elemento puede estar en varios estados al mismo tiempo, por ejemplo, cuando pinchamos sobre un enlace con el ratón, estamos activando el elemento (:active) y además tenemos el ratón sobre el (:hover)

Entonces ¿cual de las dos reglas se aplicará?, pues la que se determine por el orden de cascada, en el caso que tratamos aqui, se trata de dos reglas de igual fuerza y son igual de específicas, entonces se aplicará la que aparezca especificada en ultimo lugar.

Esto puede ofrecer comportamientos extraños si no somos cuidadosos con el orden el que escribimos nuestras reglas.

El orden adecuado, es :hover, :focus, active.

¿Dificil de recordar? No pasa nada, en el próximo post hablaremos del amor, el odio y Anakin Skywalker y ya veras como lo recuerdas.

Problemas con Internet Explorer

Si, hay problemas y gordos. IE simplemente no aplica el estandar, e ignora estas pseudo-clases para todo lo que no sea un enlace. Olvidate de un efecto :hover sobre una capa o una fila de una tabla. Al menos hasta que aparezca IE7, que por lo que parece soluciona este problema.

Existen formas de simular el comportamiento de estas pseudo-clases mediante javascript que está perfectamente explicado en este articulo de www.dcc.uchile.cl