li e li:hover

[grisson]

buongiorno a tutti.
nel mio sito devo fare un menu un po come quello che c'è nella home page di html.it.
ho fatto ad esempio
<ul>[*]link1[*]link2[*]eccetera...[/list]

nel css ho messo li{background-color:#0066FF;}

non esiste una cosa del tipo li:hover{ background-color:#FF9900;}? :master:

cioè voglio che quando passo sopra cn il mouse cambia il colore di sfondo..

ps: i colori li ho presi a caso per provare.

[thomas_anderson]

ciao!
un'indagine sulla scena del crimine mi dice che purtroppo IE non supporta la pseudo-classe :hover su elementi diversi dai link. in alternativa puoi usare javascript, oppure, semplicemente, inserire i link all'interno di[*] e fare in modo che abbiano la stessa larghezza del loro elemento genitore.

[Mich_]

Come ben sanno i frequentatori del forum, le pseudoclassi nel browser IE funzionano solo sui link.
Quindi
li a:hover { ... } /* (funziona in tutti i browser) */
e` preferibile a
li:hover { ... } /* (valido, ma non riconosciuto da IE) */

Piuttosto fai in modo che il link occupi tutta la "cella":
li a { display: block; width: 100%; height: 100%; }

[grisson]

Originariamente inviato da Mich_

Piuttosto fai in modo che il link occupi tutta la "cella":
li a { display: block; width: 100%; height: 100%; }

grazie mille è proprio quello che volevo....

comunque per javascript cosa ci sarebbe da fare?

[thomas_anderson]

soluzione semplice, rozza & efficace:

<li onmouseover="this.style.background='#ccc'" onmouseout="this.style.background='#fff'">...

se non hai tempo da perdere con funzioni, proprietà e metodi.

[grisson]

ok grazie

[pierofix]

Per un javascript non intrusivo (che non tocca cioè il markup):

XHTML

<ul id="menu">[*]Uno[*]Due[*]Tre[/list]


CSS

#menu li
{
   background-color:#06F;
}
#menu li:hover,
.li_hover
{
   background-color:#F90;
}


Javascript

window.onload = function()
{
   var menu = document.getElementById('menu')
   var lis = menu.getElementsByTagName('li')

   for (var i = 0; i < lis.length; i++)
   {
      lis.item(i).onmouseover = function()
      {
         this.className = 'li_hover'
      }
      lis.item(i).onmouseout = function()
      {
         this.className = ''
      }
   }
}

[grisson]

interessante quello che hai mandato ma non funziona con ie. con firefox va, presuppongo perchè hai dichiarato #menu li:hover.

è così oppure c'è qualcosa di sbagliato?

[pierofix]

No, dovrebbe essere giusto. Non capisco perchè non funziona. Prova, eventualmente, a modificare come segue il CSS:

#menu li
{
   background-color:#06F;
}
#menu li:hover,
#menu .li_hover
{
   background-color:#F90;
}

Ho fatto una verifica e il problema dovrebbe proprio risolversi con l'aggiunta qui proposta.

[grisson]

adesso funziona.
grazie mille.