Emular las pseudoclases de CSS con Javascript

A diferencia de la técnica .htc que permite emular pseudo clases introduciendo javascript en CSS. Esta liviana, accesible, multinavegador, y estándar técnica conocida como The Suckerfish Shoal es una libreria en Javascript de apenas 2Kb que te permite emular las siguientes pseudo clases:

• :hover
  
• :focus
  
• :active
  
• :target

Veamos una muestra de lo que se puede lograr con el Suckerfish Shoal. Agregamos en nuestro javascript lo siguiente:

Código :

suckerfish(sfHover, "LI", "nav");
suckerfish(sfHover, "div", "welcome");

Esto buscará la etiqueta con id #nav y le agregará una clase .sfhover a cada etiqueta <li> cuando el mouse esté encima de él (hover). Mientras que en el segundo ejemplo agregará una clase .sfhover a cada etiqueta div que esté dentro de #welcome.

Por lo tanto, podemos escribir un código CSS asi.

Código :

#nav li:hover, #nav li.sfhover { border:1px solid red; }
#welcome div:hover, #welcome div.sfhover { background-color:black; color:white; }

De la misma manera, se puede lograr con cada uno de las pseudo clases arriba mencionadas.

Código :

suckerfish(pseudo_clase, "etiqueta_destinada", "etiqueta_padre");

Solo cambiemos la pseudo_clase por la que sea necesaria: sfHover, sfFocus, sfActive, sfTarget.

http://www.htmldog.com/articles/suckerfish/

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.