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