Webdesign – Cascading Stylesheets
Mehr Orientierung in Datentabellen

Hover-Effekt ___

Je größer Tabellen ausfallen, desto schwerer fällt es dem Auge, die Zeile zu halten. Da hilft nur noch der Zeigefinger – oder ein spezielles Tabellendesign.
Berührt die Maus eine Zelle, verändert sich der Rahmen – er wird rot. Das klappt, weil wir nicht die Zelle mit einem Rahmen umgeben haben, sondern den Tabelleninhalt. Dazu bedarf es eines vergrößerten Randabstandes (cellpadding=?8?).
Der Tabelleninhalt wird verlinkt und via CSS mit einem simplen Hover-Effekt versehen. Den Mauszeiger stellen wir auf seine Standard-Optik zurück (cursor: default), denn der Schein-Link selbst soll dem Besucher verborgen bleiben.

Tabelleninhalt

Eine solche Datentabelle bedeutet mehr Aufwand, aber der könnte sich ja lohnen. Schließlich sieht?s schicker aus und der Zeigefinger darf ruhig bleiben. Der CSS-Quellcode für den Dateikopf sieht so aus:

A:link { color : black; textdecoration: none; background-color: transparent; border: 1px solid gray; padding: 4px; cursor : default}
A:visited {color : black; textdecoration: none; background-color: transparent; border: 1px solid gray; padding: 4px; cursor : default}
A:hover {color: black; textdecoration: none; background-color: transparent; border: 1px solid red; padding: 4px; cursor: default}

Die Methode funktioniert mit allen modernen Browsern. Ältere zeigen nur den Effekt nicht an.