Ergänzt am 24. September 2026: Praxisbeispiel zu Hover-Farben einer verlinkten Angebotsbox in Zeta Producer hinzugefügt.
Dieser Artikel ist Teil von unserer Serie „Internet in einfacher Sprache“.
Hover ist ein Begriff aus dem Englischen. Hover heißt auf Deutsch „schweben“. Sie sehen den Hover-Effekt zum Beispiel auf Webseiten. Ein anderes Wort für den Hover-Effekt ist der Mouseover-Effekt. Mouseover heißt auf Deutsch „Maus über“.
Sie fahren mit Ihrer Computer-Maus über ein bestimmtes Element auf einer Webseite. Dieses Element kann zum Beispiel eine Verlinkung, ein Bild, ein Knopf oder ein Text sein. Wenn sich das Element verändert, sobald Sie mit Ihrer Computer-Maus darüberfahren, ist das der Hover-Effekt.
Ein Beispiel ist ein Kontakt-Button, dessen Hintergrund sich beim Darüberfahren verdunkelt. Die genaue Veränderung legt die Gestaltung der Website fest.
Auf Touchscreens gibt es häufig keinen dauerhaften Mauszeiger. Wichtige Informationen und Aktionen sollten deshalb auch ohne Hover erreichbar sein. Prüfen Sie außerdem die Bedienung mit der Tastatur. Hinweise zum Verhalten auf verschiedenen Geräten finden Sie in der MDN-Dokumentation zu :hover.
Den Hover-Effekt gestalten die Menschen, die die Webseite programmieren. Das heißt die Webseiten-Programmierer bestimmen was passieren soll, wenn Sie mit Ihrer Computer-Maus über ein Element auf der Webseite fahren.
Vorteile von dem Hover-Effekt
- Der Hover-Effekt zeigt dem Internet-Nutzer, dass bei diesem Webseiten-Element weitere Aktionen möglich sind. Wenn Sie zum Beispiel mit Ihrer Maus über die Verlinkung fahren, erscheint ein Unterstrich. Dieser Hover-Effekt soll dem Internet-Nutzer zeigen, dass der Internet-Nutzer die Verlinkung anklicken kann.
- Der Hover-Effekt macht eine Webseite für die Internet-Nutzer interessanter. Denn der Internet-Nutzer kann mit seiner Maus verschiedene Hover-Effekte auslösen und entdecken. Ob das hilfreich ist, hängt davon ab, ob der Effekt die Bedienung verständlicher macht.
- Durch den Hover-Effekt können dem Internet-Nutzer bestimmte Elemente auf der Webseite näher erklärt werden. Auf der Webseite sind zum Beispiel Symbole, die durch einen Klick den Internet-Nutzer auf eine andere Webseite weiterleiten. Die Webseiten-Programmierer können den Internet-Nutzern einen kleinen Text einblenden, wenn sie mit der Maus über das Symbol fahren. Der Text sagt den Internet-Nutzern auf welche Webseite sie weitergeleitet werden, wenn sie dieses Symbol anklicken.
Beispiel: Eine verlinkte Angebotsbox reagiert auf die Maus
Eine Angebotsbox auf Ihrer Website führt zu einer Leistungsseite. Wird ihr Hintergrund beim Darüberfahren etwas dunkler, erhalten Besucher eine zusätzliche Rückmeldung, dass die Box anklickbar ist.
In Zeta Producer können Sie dafür das Widget „Linkbox“ verwenden. In dessen Farboptionen legen Sie die Gestaltung für den normalen Zustand und für Hover fest. Wählen Sie Farben, bei denen Überschrift und Text in beiden Zuständen gut lesbar bleiben.
Beschriften Sie die Box verständlich, zum Beispiel mit „Mehr zur Wartung“. Der Zweck sollte auch ohne Mausbewegung erkennbar sein. Prüfen Sie den Link zusätzlich auf dem Smartphone und mit der Tastatur.
Die Einstellungen finden Sie im Handbuch unter Linkbox und Hover-Farben in Zeta Producer.
Erfahren Sie mehr über den Hover-Effekt in unseren Quellen
Ähnliche Begriffe
Dieser Artikel ist Teil von unserer Serie „Internet in einfacher Sprache“.