Sehr einfach über CSS ist es möglich, die Tabellenzeile farblich hervorzuheben, auf der der Mauszeiger steht. Dadurch ist es für den Benutzer wesentlich einfacher, sich in der Tabelle zu orientieren und vor allem bei sehr vielen Spalten verliert man nicht die Orientierung.
| Nr. | Kürzel | Beschreibung |
|---|---|---|
| 1. | Pro2 | Fahren Sie mit der Maus auf diese Tabelle, um den Effekt zu sehen! |
| 2. | Bsp1 | hier kommt nun viel Beispieltext für die Tabelle |
Im CSS wird folgender Code aufgenommen – wobei das:hover den Zauber bewirkt.
tbody tr:hover {
background: yellow;
color: black;
}
Bzw. wenn man eine Tabelle explizit über deren ID-Selektor ansprechen möchte:
#tabellenidselektor tbody tr:hover {
background: yellow;
color: black;
}
Vorraussetzung ist, dass man seine Tabellen sauber aufbaut, sprich mit den Bereich thead, tbody und gegebenenfalls tfoot. Denn man möchte ja keine Hervorhebung, wenn jemand über den Spaltenüberschriften fährt :)