Hover-Effekt über das Hintergrundbild

Hovereffekte beim Überfahren mit der Maus werden sehr häufig benutzt. Früher hat man, um einen Hover-Effekt zu erschaffen, einfach eine andere Grafik geladen und diese angezeigt. Eine neue Methode für Hovereffekte passiert mittels CSS-Sprites. Die Umsetzung ist einfach und erfolgt über die Positionierung des Hintergrundbildes.

 

 

Definition in css

div.hovereffekt {
background: url("background-image.png") no-repeat;
height: 50px;
width: 100px;
}

div.hovereffekt:hover {
background: url("background-image-hover.png") no-repeat;
}

Und so schaut´s aus