Smart Lists: Hover-Effekt ohne Preload
Egal ob in Navigationen oder bei einfachen Links — subtile Hover-Effekte helfen dem User zwischen aktiven und inaktiven Elementen zu unterscheiden. Oft wird dabei auf leichte Änderung der Hintergrund- oder Schriftfarbe gesetzt. Doch wie können auch Bilder ohne Javascript-Preload ausgetauscht werden?
Ziel dieses Tutorials
Ziel dieses Tutorials soll es ein, eine Liste mit Links, ähnlich wie im Sidebar von Bartelme Design, zu erstellen. Dabei soll jeder Eintrag über ein Aufzählungszeichen verfügen, welches beim Darüberfahren mit der Maus ausgetauscht werden soll. Zusätzlich wollen wir erreichen, dass das zweite Bild weder beim erstmaligen Hovern nachgeladen wird, was eine störende Verzögerung zur Folge hätte, noch mittels Javascript vorausgeladen werden muss.
Schritt 1
Aufbauend auf dem ersten Teil der „Smart Lists“ Serie erstellen wir in einem ersten Schritt unser HTML-Gerüst, bestehend aus einer einfachen Liste und mehrere Anchor-Tags. Um unsere CSS-Regeln auf diesen spezifischen Bereich anwenden zu können, versehen wir die Liste zusätzlich mit einer eindeutigen Id.
<ul id=“smartList”>
<li><a href=”#”>Alpha</a></li>
<li><a href=”#”>Beta</a></li>
<li><a href=”#”>Gamma</a></li>
<li><a href=”#”>Delta</a></li>
</ul>
Wiederum entfernen wir über CSS die störenden Aufzählungszeichen und setzen Innen- und Außenabstand
(padding und margin) auf „0“.
Ein Blick auf das erste Beispiel zeigt das Ergebnis.
Schritt 2
In einem nächsten Schritt definieren wir die Schriftfarbe der Links und entfernen die Unterstreichung mittels
text-decoration: none. Anstatt nun das Hintergrundbild dem Listenelement
zuzuweisen, werden wir es in diesem Fall dem Anchor zuweisen. Dies ist notwendig, da wir mit der Pseudo-Klasse „:hover“ arbeiten werden, welche im IE nur auf Anchor-Tags angewandt werden kann — in allen anderen Browser werden Pseudo-Klassen bei allen Elementen interpretiert. Nachdem wir nun den entsprechenden Wert für
den linken Innenabstand (padding-left) gesetzt haben, sieht nun unsere
Liste bereits ganz ansehnlich aus.
Schritt 3
Bisher unterscheidet sich unsere Liste nicht maßgeblich von jener, welche wir im ersten Teil erstellt haben — es fehlt also noch der Hover-Effekt. Ein naheliegender Ansatz wäre, dafür drei unterschiedliche Bilder zu erstellen und diese den einzelnen Elementen zuzuweisen. Dies hätte jedoch den Nachteil, dass nicht alle Bilder beim Öffnen der Seite geladen werden würden — um dies zu verhindern müssten wir einen Preloader mittels Javascript erstellen. Da wir jedoch die Liste gänzlich ohne Scripts erstellen wollen, müssen wir auf eine andere Technik zurückgreifen.
Der Trick dabei ist, alle verwendeten Stati in eine einzige Datei (siehe Abbildung) zu packen und mit der
CSS-Property background-position an die derzeit benötigte Position zu springen. In diesem Fall
weisen wir mit Hilfe der Pseudo-Klasse „:hover“ dem Hintergrundbild die Postion von -200px zu.
Der vertikale Wert bleibt weiterhin auf 50% gesetzt, wodruch das Bild auch bei unterschiedlichen Schriftgrößen
sets vertikal zentriert dargestellt wird. Beispiel 3
zeigt die fertige Liste in Aktion.
