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
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.
Vaya, gracias :D
Me alegro de que alguien lea esto de vez en cuando :P
yo llevo tiempo usando Whatever:hover. Echadle un vistazo ;)
Vaya, y ayer Álvaro y yo haciendo lo mismo :D
Vaya, muy muy bueno, estaría guay sacar una versión con prototype para poder aprovecharlo en caso de tenerlo ya incorporado :-)
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
Update: prototype es la leche… ya tengo una versión de esto que tira de
getElementsByClassNameEvent.observe()onloadMil gracias por la sugerencia, me da a mi que prototype y yo vamos a ser muy buenos amigos :D
mmm, esto me ha librado de muchos quebraderos de cabeza. Gracias mil