6.12 Grafische Rollover-Effekte
Problem
Anstelle von Textlinks sollen grafikbasierte Rollover-Effekte benutzt werden.
Lösung
Der erste Schritt besteht darin, den Text innerhalb des Anker-Elements mit einem span-Element zu umgeben:
<a href="/" id="linkhome"><span>Homepage</span></a>
Anstelle von JavaScript können Sie nun die Eigenschaft background-image zusammen mit den Selektoren für die Pseudoklassen :hover und :active benutzen, um die Bilder auszutauschen, wenn sich der Mauszeiger über dem Link befindet (siehe Abbildung 6-17):
a span { display: none; } a:link { display: block; width: 125px; height: 30px; background-image: url(btn.gif); background-repeat: no-repeat; background-position: top left; } a:link:hover { display: block; width: 125px; height: ...Get CSS Kochbuch now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
