Die CSS-Pseudoklasse „:hover“ wird verwendet, um das Verhalten eines Elements zu definieren, wenn sich der Mauszeiger (Cursor) über diesem Element befindet.
Hover-Effekte haben im Webdesign eine wichtige funktionale und ästhetische Bedeutung. Hier sind die zentralen Aspekte:
- Benutzerführung & Interaktion: Hover-Effekte geben visuelles Feedback, wenn Nutzer mit der Maus über ein Element fahren. Das macht klar: „Dieses Element ist klickbar“ (z. B. bei Buttons, Links, Bildern). „Hier passiert etwas bei Interaktion“. Folglich wird die Usability (Benutzerfreundlichkeit) enorm gesteigert.
- Visuelles Design & Ästhetik: Hover-Effekte machen eine Website lebendiger und moderner. Mit subtilen Animationen oder Farbwechseln wirkt die Seite dynamisch, interaktiv und professionell.
- Fokus & Aufmerksamkeit: Hover-Effekte können dazu genutzt werden, wichtige Inhalte hervorzuheben, z. B.: Produktinformationen, die beim Hovern eingeblendet werden oder Call-to-Action-Buttons, die beim Hovern leuchten oder sich vergrößern.
- Mikrokonversionen fördern: Durch kleine Interaktionen kann das Nutzerverhalten positiv beeinflusst werden: mehr Klicks, längere Verweildauer, bessere Orientierung
- Grenzen & Barrierefreiheit: Hovern funktioniert nur mit der Maus – nicht auf Touch-Geräten. Daher sollten Infos oder Funktionen nicht ausschließlich durch Hover verfügbar sein und Alternativen für mobile Nutzer bereitstehen.
Die CSS-Syntax lautet wie folgt:
selector:hover {
/* Stilregeln */
}
Beispiele:
1. Link-Farbe ändern beim Hovern:
a:hover {
color: red;
text-decoration: underline;
}
Effekt: Wenn man mit der Maus über einen Link fährt, wird er rot und unterstrichen.
2. Button-Hintergrund ändern
button:hover {
background-color: #4CAF50;
color: white;
}
Effekt: Wenn man mit der Maus über den Button fährt, ändert sich die Hintergrundfarbe.
3. Bild vergrößern beim Hovern
img:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}
Effekt: Das Bild zoomt leicht hinein, wenn man mit der Maus darüber fährt.
Eine reichhaltige Sammlung von sehr gelungenen Hover-Effekten finden Sie auf tympanus.net, und zwar insbesondere hier und hier.
Im Folgenden sehen Sie ein auf CodePen veröffentlichtes und von mir leicht abgewandeltes Beispiel eines Hover-Effekts