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.