Cambiare colore alle celle di tabella con la pseudoclasse :hover

In altri termini si tratta di una pseudoclasse che potremmo associare a qualsiasi elemento della pagina html come, per esempio:
p:hover, input:focus ecc...

Cosa succede se dichiariamo nel Foglio di Stile i due codici appena riportati? Nel primo caso, quando passiamo con il mouse su un paragrafo, potrebbe cambiare il colore di sfondo oppure il colore del testo; nel secondo, invece, potremmo volere il colore di sfondo, o il colore dei bordi, della textbox diversi quando l´elemento riceve il "focus". Di applicazioni del genere se ne possono trovare tante, solo che si devono fare i conti con il browser ad oggi più usato (oltre il 90%) ma che è, mio personale parere, il peggiore che esista in circolazione. Non è un articolo di polemica, quello di oggi, ma di evidente, se non voluto, ritardo, ad adeguarsi agli standard del web. Per tornare all´argomento principale, oggi vedremo come fare per dare un colore diverso di background ad una intera riga di tabella quando passiamo su di essa con il mouse. Per sopperire alle mancanze di quanto appena scritto più su, ci avvarremo di pochissimo codice JavaScript. Non faremo altro che realizzare una normalissima tabella il cui codice CSS è il seguente:

.nomeClasse tr:hover, .nomeClasse tr.secondocolore {
background-color: #00a3dd;
color: #fff;
font-weight:bold;
}

Non mi soffermo sulla scrittura del codice di tutta la tabella ma solo della parte che ci interessa. Bene; cosa abbiamo dichiarato con il codice appena scritto? Che le righe [ tr ] della tabella alla quale abbiamo assegnato una classe [ .nomeClasse ], nello stato :hover, [cioè quando siamo su di esse con il mouse] devono assumere il colore di sfondo celeste [background-color: #00a3dd] ed il colore del testo deve essere bianco [color: #fff], oltre che grassetto. Queste 3 righe di codice basterebbero se Internet Explorer interpretasse correttamente lo stato :hover anche quando non si è in presenza di un link. Adesso vediamo come fare per farlo interpretare anche ad esso.
Avrete notato che ho usato due classi: la prima appena descritta e la seconda è:
.nomeClasse tr.secondocolore. Questa verrà richiamata quando nella pagina inseriremo codice JavaScript. Il risultato sarà identico sia per Internet Explorer e sia per i browser che hanno il motore di rendering basato su Gecko. Adesso vi invito a visualizzare il primo file di esempio con un browser standard e apprezzare come non serve nessuno script per cambiare il colore delle righe.

Il codice JavaScript per Internet Explorer

Tutto il codice JavaScript di cui avremo bisogno è il seguente:

var righe = document.getElementsByTagName('tr');
for (var i = 0; i < righe.length; i++) {
righe[i].onmouseover = function() {
this.className += ' secondocolore';
}
righe[i].onmouseout = function() {
this.className = this.className.replace('secondocolore', '');
}
}

Cosa fa il codice? Individua tutti i tag <tr> nella pagina ed assegna un gestore di evento "mouseover" e "mouseout" ad ognuno di essi. Tale gestore di evento applica la classe CSS "secondocolore" quando il mouse passa sopra di esse e, viceversa, quando il mouse si allontana. Detto ciò possiamo vedere il risultato finale anche in Internet Explorer.