Suckerfish:hover – Simple y maravilloso

Mie 2008-09-17 - 3:35 - En tutorial

Gracias a este sencillo/liviano script (1KB) en el menú central del blog funciona el efecto hover en cualquier navegador que se imaginen, y en esta entrada les enseñare como hacerlo.

Si ustedes saben ingles pueden acceder aquí tienen el link hacia el sitio oficial donde enseñan como emplearlo, pero si no saben pueden seguir con mi explicación: Me gustaría señalar que con este poderoso script seremos capaces de añadir el estado Hover a cualquier elemento (y sin perder la valides del código, tanto Html como Css), lo primero que debemos hacer es insertar este el script en nuestro Head, entre las etiquetas head /head:

sfHover = function() {
var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”);
for (var i=0; i sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Como verán en el código se esta indicando que queremos activar el script en todos los elementos que se encuentren bajo Id “Nav”:

Linea 2: getElementById(”nav”)

y que sean elementos de una lista (li):

Linea 2: getElementsByTagName(”LI”)

Por último nos queda especificar vía Css los atributos del hover, en este caso seria así:

li:hover ul, li.sfhover ul { display: block }

Como vemos se agrega una clase llamada .sfhover ademas del Hover, esta clase debemos añadirla siempre que quieras usar el hover en un elemento. Si tienen ganas de ver otro ejemplo de este script funcionando simplemente miren el menú central del sitio (Vean tanto el código fuente como el css).

Side Info

Autor: admin
Mie 2008-09-17 - 3:35
Comentarios: -
Categorías: tutorial Tags: , , ,
Relacionados:
Bookmark and Share
Deja un comentario
Nombre:
E-Mail:
URL:
Comentario: