Rollover-Effekte ohne JavaScript
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
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.
Da die Selektoren die gleiche Spezifität besitzen, muss bei deren Definition eine bestimmte Reihenfolge eingehalten werden, damit sich die Stile nicht gegenseitig überschreiben. Dieses Problem wird mit dem Konstrukt LoVe/HAte vermieden.
Auch wenn die Pseudoklassen :hover und :active auf alle Elemente angewendet werden können, kommen sie fast ausschließlich bei Links zum Einsatz. (Der Internet Explorer bis zur Version 6 unterstützt :hover nur bei Links, nicht aber bei Bildern, Tabellenzellen usw. Die aktuellen Versionen von Internet Explorer, Mozilla, Opera und Safari haben diese Einschränkung nicht.)
In der obigen Lösung wird sichergestellt, dass der Rollover-Effekt nur auf Links angewendet wird. Ohne :hover und :active können moderne Browser die Effekte auf alle a-Elemente im Dokument anwenden, ohne dabei die Spezifikation zu verletzen, wie in der folgenden Code-Zeile und in der nächsten Abbildung gezeigt:
Abbildung: Unerwünschter Rollover-Effekt bei einer Überschrift.
<h2><a name="europan">Li Europan lingues</a></h2>Siehe auch
Die CSS 2.1-Spezifikation zu den Pseudoklassen :active und :hover und eine Erläuterung zu Links und Spezifität.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln