:hover sui div non funziona in IE Internet Explorer

Capita spesso che ore di lavoro sui css vadano perse per deludenti test di Cross Browser compatibility.

Del resto e' di fatto impossibile prevedere tutti i comportamenti di ogni browser nell'aprire una pagina web.

Ultima esperienza: Internet Explorer non gestisce l'evento :hover sui div.

Quando (se?) usi IE Internet Explorer,  non avrai problemi della realizzazione dei tuoi css applicando :hover ai tag <a href> ed altri, ma quando si tratta dei <div>, il browser di Microsoft non ne vuole proprio sapere (idem vale per l'opacity)

Per cui, se nelle tue pagine  fai uso dei div, e vuoi che qualcosa succeda quando il mouse va sopra quel <div>, dovrai preoccuparti degli utenti IE, che vedranno l'evento che prepari per loro usando la funzione  javascript sotto (da incollare nella head della tua pagina web).

<script type="text/javascript"><br /> // <![CDATA[

function setStyle(obj,style,value){
getRef(obj).style[style]= value;
}

function getRef(obj){
return (typeof obj == "string") ?
document.getElementById(obj) : obj;
}
// ]]>

/* USAGE:
* objId = element id.
* style = the style to be changed.
* value = the value assigned to the style.
*/

</script>
 

che puo' essere chiamata, ad esempio  da questo codice

<div class="node" onmouseover="setStyle(this,'background-color','#EEEEEE')"<br /> onmouseout="setStyle(this,'background-color','transparent')" ><br />

La funzione e' corta, e potente,

Dato che (al momento) non accoglie array di proprieta', va istanziata per ogni attributo da assegnare.

forse a breve una nuova versione che accetta array di proprieta'? 

Commenti, come al solito, sono graditi.