/ Published in: JavaScript
Tomado de Sofá Naranja (http://sofanaranja.com)
La idea es que a todos los elementos que queramos hacerles un hover les asignamos la clase “hoverâ€, y definimos en otra clase “hoverclass†los atributos del estado hover.
A pesar de que en el código se usa una variable llamada ‘div’, funciona con *cualquier* elemento de la página…
Lo que hacemos, igual que con el método anterior, es buscar elementos que contengan la clase ‘hover’, y les asignamos la clase ‘hoverclass’ en el evento ‘onmouseover’.
Más cosillas… Event.observe() es la forma inteligente de asignar una función a un evento sin “manchar†el HTML de la página. En este caso le asigno la función ‘init()’, que se encarga de llamar a ’setHover()’ con los dos parámetros que necesita (el class que he usado para definir qué elementos tienen hover, y el class que quiero usar cuando se hace rollover).
La idea es que a todos los elementos que queramos hacerles un hover les asignamos la clase “hoverâ€, y definimos en otra clase “hoverclass†los atributos del estado hover.
A pesar de que en el código se usa una variable llamada ‘div’, funciona con *cualquier* elemento de la página…
Lo que hacemos, igual que con el método anterior, es buscar elementos que contengan la clase ‘hover’, y les asignamos la clase ‘hoverclass’ en el evento ‘onmouseover’.
Más cosillas… Event.observe() es la forma inteligente de asignar una función a un evento sin “manchar†el HTML de la página. En este caso le asigno la función ‘init()’, que se encarga de llamar a ’setHover()’ con los dos parámetros que necesita (el class que he usado para definir qué elementos tienen hover, y el class que quiero usar cuando se hace rollover).
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
function setHover(className,hoverClassName) { var hoverDivs = document.getElementsByClassName(className); hoverDivs = $A(hoverDivs); hoverDivs.each( function(div){ div.onmouseover = function(){ Element.addClassName(this,hoverClassName); } div.onmouseout = function(){ Element.removeClassName(this,hoverClassName); } } ); } function init (){ setHover('hover','hoverclass'); } Event.observe(window, 'load', init, false);
URL: http://sofanaranja.com/2006/02/17/efecto-hover-sobre-cualquier-cosa-v20/