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.
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.
Übung 7: Experimentiere anhand der Dateien, die du schon geschrieben hast mit den Pseudoklassen.