lunes, 29 de marzo de 2010

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:



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
  • 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/

    Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
    ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

  • No hay comentarios: