Come modificare di una riga di colore al passaggio del mouse

May 3



tabelle complesse di dati possono essere il formato migliore per i webmaster di visualizzare informazioni complesse e sfaccettato, come ad esempio le liste massicce di inventario con insiemi di dati corrispondenti o relazioni annuali di vendita dei prodotti attraverso un marchio diversificato. Cascading Style Sheet (CSS) codifica viene utilizzato per creare queste tabelle, ma tali elenchi densi non sono sempre di facile lettura. Applicando un effetto mouseover che cambia il colore di sfondo di una intera fila nel momento in cui un visitatore passa il cursore sopra la riga, i dati possono essere isolati e leggere con facilità.

istruzione

1 Aprire il file HTML in Blocco note o il vostro editor di testo preferito. Aggiungere questo codice al vostro CSS:

<Style type = "text / css">

tavolo {color: #FFFFFF; font-family: Arial, Verdana}

.normal {background-color: # 000000}

.normalActive {background-color: # 999999}

</ Style>

<Table class = "ex" width = "500" cellspacing = "1">

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normale'" class = "normal">

<Td> Riga 1 Colonna 1 </ td>

<Td> Riga 1 Colonna 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normale'" class = "normal">

<Td> Riga 2 Colonna 1 </ td>

<Td> Riga 2 Colonna 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normale'" class = "normal">

<Td> Riga 3 colonna 1 </ td>

<Td> Riga 3 Colonna 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normale'" class = "normal">

<Td> Riga 4 Colonna 1 </ td>

<Td> Riga 4 Colonna 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normale'" class = "normal">

<Td> Riga 5 Colonna 1 </ td>

<Td> Riga 5 Colonna 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normale'" class = "normal">

<Td> Riga 6 Colonna 1 </ td>

<Td> Riga 6 Colonna 2 </ td>

</ Tr>

</ Table>

2 Sostituire "FFFFFF" con il codice colore del testo desiderato per i dati nella tabella di dati. Sostituire "000000" con il codice colore desiderato per lo sfondo della tabella di dati. Sostituire "999999" con il vostro sfondo desiderato cambiamento di colore-codice quando un visitatore passa il suo cursore su una fila. Utilizzare la tabella di colore-codice esadecimale si trovano in Risorse.

3 Sostituire la riga e di colonna di testo con i dati desiderati da visualizzare in quelle cellule.

4 Salvare e caricare il file HTML.