CSS Kochbuch

6.7 Rollover-Effekte ohne JavaScript

Problem

Es soll ein einfacher Rollover-Effekt erzeugt werden, ohne dass dabei JavaScript zum Wechseln der Bilder benutzt wird.

Lösung

Verwenden Sie die Pseudoklassen :hover und :active:

a:link {
 color: #777;
 text-decoration: none;
}

a:visited {
 color: #333;
 text-decoration: none;
}
a:link:hover, a:visited:hover {
 color: #777;
 background-color: #ccc;
}
a:link:active, a:visited:active {
 color: #ccc;
 background-color: #ccc;
}

Diskussion

Die Pseudoklasse :hover ahmt das Verhalten des häufig benutzten JavaScript-Events onmouseover nach. Anstatt aber eine JavaScript-Funktion auszuführen, wenn sich der Mauszeiger eines Benutzers über einem Link befindet, werden dem Link im Falle von :hover neue Stildefinitionen zugewiesen. ...