Cambiare colore di una riga (menu) al passaggio del mouse

[spiadadda]

Ciao a tutti,
forse il titolo non è molto chiaro ma credo che la questione sia molto semplice....

Infatti vorrei capire come si fa a far cambiare colore ad una riga al passaggio del mouse.

Un esempio di ciò che sto provando a spiegarvi lo trovate nella Home di HTML.IT ed in particolare nei menu di navigazione laterali.
Ad esempio prendiamo in considerazione il menu di navigazione laterale (sinistra) SITI TEMATICI, ovvero il menu dove sono riportati i collegamenti Basic, HTML / XHTML, CSS, JavaScript, XML, ecc

Allora in questo caso come si riesce ad ottenere l'effetto di far cambiare colore alla riga?

In particolare di defoult il menu di navigazione considerato ha un colore blu , ma quando ci si passa con il mouse (cursore) sopra oltre che il link cambia stato anche la riga cambia colore e diventa verde scuro o rossa a seconda del tipo di collegamento.

Come è possibile ottenere ciò?

Qualcuno può postarmi una porzione di codice per capire meglio?
Va benissimo anche una cosa elementare giusto per capire un pò il funzionamento.

Anche qualche tutorial in merito sarebbe molto d'aiuto.

Grazie infinite

Ciao Ciao

[pierofix]

Ecco un esempio che sfrutta markup pulito, CSS per la presentazione e un po' di Javascript non intrusivo per fare contento anche quell'incompetente di Internet Explorer.

XHTML

<p id="avvertimento">
   Il prossimo sabato, per pranzo,
   ci saranno le zucchine al posto
   delle patate.
</p>


CSS

p:hover,
.evidenziato
{
   background-color:#CCC;
}


Javascript (da servire preferibilmente tramite commenti condizionali al solo IE)

window.onload = function()
{
   var avvertimento = document.getElementById('avvertimento')

   avvertimento.onmouseover = function()
   {
      this.className += ' evidenziato'
   }
   avvertimento.onmouseout = function()
   {
      this.className = this.className.replace(' ', 'evidenziato')
   }
}

[spiadadda]

Prima di tutto grazie infinite pet la risposta!

Il java script è proprio necessario? Se si perchè? Quali versioni di IE danno problemi?

[pierofix]

Originariamente inviato da spiadadda
Il java script è proprio necessario? Se si perchè? Quali versioni di IE danno problemi?

Qualsiasi versione di IE non è in grado di interpretare la pseudo-classe 'hover' applicata ad un qualsiasi marcatore che non sia <a>. Ecco perché c'è bisogno di un javascript - comunque non intrusivo, che non inquina cioè il mark-up - che ovvi a questa carenza (se ti interessa l'effetto anche su IE e lo ritieni non evitabile).

Poi, ribadisco, per fare le cose bene, lo script javascript andrebbe servito al solo IE tramite la tecnica dei commenti condizionali.

[gabip87]

Originariamente inviato da pierofix

Qualsiasi versione di IE non è in grado di interpretare la pseudo-classe 'hover' applicata ad un qualsiasi marcatore che non sia <a>.

la versione 7 sembra sia in grado di gestirla.

[pierofix]

Originariamente inviato da gabip87
la versione 7 sembra sia in grado di gestirla.

Ah sì? Sono rimasto un po' indietro: devo ancora andare a vedermi le implementazioni definitive dell'ultima versione. Chissà perché ma parto già deluso/prevenuto.