Webmaster-Crashkurs

Tabellenzeile bei Mausberührung hervorheben

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 :)

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2021   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: