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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.