Efecto :hover en cualquier cosa

Esta semana me preguntaron lo siguiente:

¿Cómo hacer un :hover en un DIV con Internet Explorer?

No sé si se suponía que debía saberlo, pero la verdad es que me pilló un poco por sorpresa…

¿Con #iddeldiv:hover, no?

(Comentario que demuestra mi total ignorancia con respecto a las capacidades de Explorer)

Me temo que Explorer sólo soporta :hover en los ‘a’…

Como uno es de naturaleza curiosa, me puse a trastear con el dilema, llegando a la siguiente solución (que no deja de ser una chapuza, pero que no sólo funciona en Explorer sino en Camino, Firefox y Safari):

<script>
    function replaceHover(){
        var hoverDivs = document.getElementsByTagName("div");
        for(var i=0; i<hoverDivs.length; i++){
            if(hoverDivs[i].className.indexOf('hover') != -1){
                //  ...guardamos las clases del DIV...
                var classes = hoverDivs[i].className;
                //  ...en onmouseover le añadimos una clase extra, 'hoverclass'...
                hoverDivs[i].onmouseover = function(){
                    this.className += ' hoverclass';
                }
                //  ...y se la quitamos en onmouseout
                hoverDivs[i].onmouseout = function(){
                    this.className = classes;
                }
            }
        }
    }
</script>

Que quiere decir, en román paladino:

Obtener todos los DIVs del documento
Mirar si el DIV tiene asignada una clase CSS ‘hover’
Si es así, le asignamos un evento ‘onmouseover’ que le añade la clase ‘hoverclass’ (que tendrá alguna pijadilla del estilo de background-color: rosachicle, o algo por el estilo)
Y ya puestos, se la quitamos cuando salga el ratón del DIV

Para disparar el cambio se llama a la función ‘replaceHover’ desde el ‘onload’ de body:

<body onload="replaceHover()">

Obviamente, el código se puede usar con otros tags… sólo habría que cambiar el

getElementsByTagName("div")

por

getElementsByTagName("nombre_del_tag_que_quieras")

Pos eso… agradecimientos especiales a Furilo por darme algo en qué pensar… :D

Update: un método mucho más elegante usando prototype.js

contenido relacionado:

(aquí irían posts relacionados, pero creo que no tengo nada parecido a este...)

Thursday, January 5th, 2006 at 20:41 CSS, Código, JavaScript

8 comentarios a “Efecto :hover en cualquier cosa”

Aw! dijo el 06/01/2006 a eso de las 23:59
Jo, que interesante. La verdad es que algo había oido pero no lo tenia muy claro. Desde hace poco leo sofanaranja y tengo que decir que me encanta.
ale dijo el 07/01/2006 a eso de las 12:55
Vaya, gracias :D

Me alegro de que alguien lea esto de vez en cuando :P
sergio dijo el 09/01/2006 a eso de las 08:41
yo llevo tiempo usando Whatever:hover. Echadle un vistazo ;)
Fernando dijo el 10/01/2006 a eso de las 08:27
Vaya, y ayer Álvaro y yo haciendo lo mismo :D
demimismo dijo el 16/02/2006 a eso de las 16:16
Vaya, muy muy bueno, estaría guay sacar una versión con prototype para poder aprovecharlo en caso de tenerlo ya incorporado :-)
ale dijo el 16/02/2006 a eso de las 21:37
Prometo echarle un ojo a prototype cuando pueda (de momento sé que existe y poco más…) porque me temo que tendré que usarlo para un par de proyectillos, y mola conocer las tripas de tus herramientas : )

Si saco algo en claro, algo publicaré (y si no también, qué leches… : )

Gracias por la sugerencia
ale dijo el 16/02/2006 a eso de las 23:38
Update: prototype es la leche… ya tengo una versión de esto que tira de
getElementsByClassName
y usa
Event.observe()
para cambiar los enlaces en el
onload
sin “manchar” el HTML.
Mil gracias por la sugerencia, me da a mi que prototype y yo vamos a ser muy buenos amigos :D
Gonzalo dijo el 08/04/2008 a eso de las 18:58
mmm, esto me ha librado de muchos quebraderos de cabeza. Gracias mil

Sofá Naranja