Effetto hover ad un intero div

[NathanWeb]

Salve a tutti,
ho un piccolo problema. Dato un div che chiameremo cella_image, ciò che voglio ottenere è un effetto hover al passaggio del mouse. Nulla di più facile sembrerebbe, infatti vado a riportare il codice da me inserito.

div #cella_image {
border: 1px solid #FFFFFF;
padding: 5px 0px 5px 0px;
background: #F7F7F7;
}


div #cella_image:hover {
border: 1px solid #DDDDDD;
background: #F7F7F7;
}

Fatto ciò, apro il browser e tutto sembra funzionare a meraviglia (Firefox 2.0.0.1)

Internet Explorer invece non ne vuole sapere di prendersi l'hover, mentre invece le proprietà inserite a cella_image le prende. (Internet Explorer 6.0.2)

Qualcuno sa come posso ovviare al problema solo per IE? Vi dico subito che npn necessito di una soluzione "univoca" in quanto gestisco la pagina con due CSS diversi (IE.css e FIREFOX.css)

Molte grazie

[Leilond]

la pseudoclasse hover viene vista da internet explore solamente sui tag <a>

[NathanWeb]

Arg! Lo avevo sospettato... come posso ovviare al problema? Dico in partenza che non posso rendere link il div...

Molte grazie

[pierofix]

Per far funzionare la cosa su IE occorre un po' di javascript (da servire preferibilmente solo a detto browser tramite commenti condizionali):

XHTML

<div id="box">
   
</div>


CSS

#box:hover,
.box_hover
{
   background-color:#CCC;
}


Javascript

window.onload = function()
{
   var box = document.getElementById('box')
   box.onmouseover = function()
   {
      this.className = 'box_hover'
   }
   box.onmouseout = function()
   {
      this.className = ''
   }
}

[NathanWeb]

Originariamente inviato da pierofix
Per far funzionare la cosa su IE occorre un po' di javascript (da servire preferibilmente solo a detto browser tramite commenti condizionali):

XHTML

<div id="box">
   
</div>


CSS

#box:hover,
.box_hover
{
   background-color:#CCC;
}


Javascript

window.onload = function()
{
   var box = document.getElementById('box')
   box.onmouseover = function()
   {
      this.className = 'box_hover'
   }
   box.onmouseout = function()
   {
      this.className = ''
   }
}

Ha funzionato alla perfezione. Grazie pierofix