Emular las pseudoclases de CSS con Javascript

Por: NEO_JP + 07.06.2006

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/

javascript css

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario