Pseudoklassen verdrängen die Effekte der Rollover-Bildchen aus der dunklen GIF-Ära. Hier wären ansonsten 20 GIF-Bilder nötig gewesen und jede Menge JavaScript.

Und so sieht's dahinter aus:

    <style type="text/css">
    <!--
    a:link {  color: #FFFFF0; background: salmon}
    a:hover {  color: tomato; background: #FFFFF0}
    a:active {  color: snow; background: tomato}
    a:visited {  color: lightslategray; background: mintcream}
    a:visited:hover { color:black; background: darkseagreen }
    a:visited:active { color:white; background: darkslategray }
    -->
    </style>

    <body bgcolor="#FFFFFF" text="#000000">

    <a href="seite1.html">Bunte Blumen</a>

    <a href="seite2.html">Zarte Bl&uuml;ten</a>

    <a href="seite3.html">Gro&szlig;e Bl&uuml;te</a>

    <a href="seite4.html">Rosarote Rosen </a>

    <a href="seite5.html">Wei&szlig;e Rosen</a>

    </body>

Es gibt keinen Skriptaufruf, keinen Wechsel der Hintergrundfarbe über das DOM (Document Object Model), nicht einmal die HTML-Kernattribute für die Ereignishandler werden benötigt.

Fast alle Browser, auch die mittelalterlichen, beherrschen Pseudolinks, die schon in CSS1 definiert wurden (nur Netscape 4.x kennt :hover und :active nicht).

    a:visited:hover { color:black; background: white }
    a:visited:active { color:white; background: blue }

Seit CSS2 können Zustände auch miteinander kombiniert werden. Insbesondere bedeutet das, dass ein Link, der bereits besucht wurde, ein erneutes :hover anzeigt und in der Zeit, in der die Maus ein weiteres Mal auf ihn geklickt wird, den Klick durch eine neue Darstellung anzeigen kann.