Listen einfach mit einer anderen Farbe und Mouseover-Effekt lesen

In diesem Artikel werden wir sehen, wie man einfache Listen, die gut lesbar für den Benutzer sind zu schaffen.
Dazu verwenden wir zwei einfache Maßnahmen:

• wechselnden Farben für unterschiedliche Zeilen der Liste;
• Markieren Sie die ausgewählte Zeile bei Mouseover.

Machen wir ein Beispiel und sagen, wir konnten zeigen, dem Benutzer eine Liste der verfügbaren Produkte in unserem E-Commerce-Website. Unter dem Ergebnis, dass wir zu erreichen:

Wie sich die Verwendung von unterschiedlichen Farben für verschiedene Linien einfacher, die verschiedenen Einträge in der Liste zu lesen, während die Anwesenheit Textmarker auf der Maus macht es noch mehr unmittelbar relevant für die Betreff-Zeile unseres Interesses.

Um unsere Liste haben wir eine einfache HTML-Tabelle, ein paar Anweisungen und ein bisschen CSS DHTML, um es zu beleben. Aber lassen Sie uns Grad.

Beginnen wir mit dem CSS starten und sehen, unter dem Inhalt unserer Stylesheet:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 Hintergrund: # 808080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

Was wir getan haben ist sehr einfach: Zuerst haben wir stilisierte den Tisch, indem Sie eine Klasse als Ganzes ("tbElenco '), dann werden wir stilisiert und <td> <th> seiner Gesamtheit, dann haben wir drei verschiedene Klassen, die den drei erstellten Status unserer verschiedenen Linien: Normal, Alternate und hervorgehoben.

Lassen Sie den Code unserer Tabelle folgen:

 <table cellspacing="0" cellpadding="2" class="tbElenco">







 <tr>







 <th> Produkt </ th>







 <th> Anzahl </ th>







 <th> Preis </ th>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> Kamera </ td>







 <td> 3 </ td>







 <td> 100,00 Euro </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> 20-Zoll-LCD TV </ td>







 <td> 1 </ td>







 <td> 220,00 Euro </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> MP3-Player </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> DVD-Player </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Console Games </ td>







 <td> 1 </ td>







 <td> 200,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140.00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 Mini-DVD Camcorder class='diff-marker'> </ td>







 <td> 1 </ td>







 <td> 270.00 Euro </ td>







 </ Tr>







 </ Table>

Wie Sie sehen können ist es eine triviale HTML-Tabelle, wo wir kümmerten entweder zuweisen, um die verschiedenen Linien (<tr>) Klassen 'normal' und 'AC'.

Zur Stimulierung der Erscheinung der Reihe auf Mauslinie verbinden wir das Element (<tr>) onmouseover und onmouseout Veranstaltungen, die jeweils sorgen die dynamische Zuweisung der Klasse "Highlight", wenn Sie und schweben wieder in die Klasse beginnen, wenn die Maus verlässt die Reihe.