Corsi on-line

Cambiare colore alle righe di una tabella al passaggio del mouse

Benchè le tabelle siano ormai obsolete per costruire il layout di una pagina web (sì, sì lo so… evviva i layout tableless!), queste assumono ancora una certa importanza e sono ancora molto utilizzate soprattutto per l’ordinamento e la presentazione dei dati estratti da un database (per la costruzione di una griglia, il tag <table> resta una buona e semplice soluzione).

Quando i campi sono molti (quindi molte celle) ed i record estratti sono parecchi (quindi molte righe) la lettura dei dati – da un punto di vista prettamente visivo – diviene difficoltosa ed è difficile focalizzare con immediatezza i dati di nostro interesse.
Una soluzione molto semplice per ovviare a questo inconveniente consiste nell’evidenziare la riga di nostro interesse nel momento in cui ci si passa sopra con il mouse.
Spesso nei forum di settore che sono solito frequentare mi capita spesso di imbattermi in domande che chiedono come fare a creare questo semplice effetto. Vediamo di dare una risposta definitiva.

Per ottenere l’effetto di evidenziatura della riga selezionata pottrebbe essere sufficiente inserire nella pagina un piccolo foglio di stile:

tr{
  background-color: #FFFFFF;
}
tr:hover{
  background-color: #FFFFCC;
}

Peccato che il CSS proposto non funzioni con IE6 il quale accetta la pseudo-classe :hover solo in associazione al tag <a>!

Per ottenere un risultato realmente cross-browser (IE6, purtroppo, è ancora molto diffuso) è, quindi, necessario ricorrere a javascript utilizzando gli eventi onmouseover e onmouseout come viene spiegato (molto bene) in questo articolo.

Post correlati
I più letti del mese
Tematiche