Pseudoklassen

Gestaltung von Links: visited, hover usw.

Wir können Links unterschiedlich darstellen, je nachdem ob sie bereits besucht wurden (visited), ob gerade die Maus darüber fährt (hover) usw.
Definition in der CSS-Datei:
a:link { background-color: #00FF00; }
a:visited { background-color: silver; }
a:focus { background-color: orange; }
a:hover { background-color: yellow; }
a:active { background-color: red; }

Achtung: Die Reihenfolge der CSS-Definitionen spielt eine Rolle: hover gewinnt hier über focus, weil im CSS-File später definiert.

Bei link kann definiert werden, wie ein Link allgemein aussieht.
Mit visited können bereits besuchte Links gestaltet werden.
Und mit hover gestaltet man die Links, über die die Maus gerade fährt.

Die Pseudoklassen funktionieren nicht nur für Links

Z.B. bei dem Menü auf dieser Seite, wird dafür gesorgt, dass die Hintergrundfarbe dunkler wird, wenn man über einen Menü-Eintrag fährt. Dies ist eine Eigenschaft, die ich dem Listeneintrag (mein Menü ist eine unordered list) <li> zugeordnet habe.

Hier gibt's ein tolles Video-Tutorial zum Thema :hover.