Der Hover-Zustand ist die Darstellung eines Elements, während der Mauszeiger darüber steht. Er signalisiert, dass das Element auf einen Klick reagiert, und ist damit eine der ältesten Rückmeldungen im Web. Auf Touchgeräten gibt es ihn nicht.
- Hover-Zustand
Die Darstellung eines Bedienelements, solange der Mauszeiger darauf ruht, ohne dass geklickt wurde.
Beispiel: „Im Hover-Zustand wird der Button dunkler, damit klar ist, dass er anklickbar ist.“Auch: Hover State oder Mouseover. Die deutsche Umschreibung lautet Mausüberfahrzustand und wird in der Praxis kaum benutzt.
Abgrenzung: Der Fokus-Zustand entsteht bei Bedienung über die Tastatur, der Aktiv-Zustand im Moment des Klicks. Alle drei gehören zu den Zuständen von Bedienelementen.
Wozu der Hover-Zustand dient
Er beantwortet eine Frage, bevor sie gestellt wird: Passiert hier etwas, wenn ich klicke? Ohne diese Rückmeldung muss der Besucher ausprobieren, und jedes Ausprobieren kostet Vertrauen. Deshalb gehört ein sichtbarer Hover-Zustand zu jedem klickbaren Element, auch zu Kacheln und Bildern, die auf den ersten Blick nicht wie Bedienelemente aussehen.
Umgekehrt gilt dasselbe: Was auf Hover reagiert, sollte auch klickbar sein. Ein Textabschnitt, der beim Überfahren die Farbe wechselt, ohne irgendwohin zu führen, erzeugt genau die Verwirrung, die der Zustand eigentlich vermeiden soll.
Warum er auf dem Handy fehlt
Ein Touchscreen kennt keinen Zeiger, der irgendwo steht, ohne zu drücken. Ein Fingertipp löst deshalb Hover und Klick zugleich aus, und viele Browser zeigen den Hover-Zustand danach so lange, bis anderswo getippt wird. Das führt zu Menüs, die geöffnet bleiben, und zu Buttons, die dauerhaft hervorgehoben wirken.
Wichtiger ist die Folge für die Inhalte: Was nur im Hover-Zustand erscheint, existiert auf dem Handy nicht. Eine Bildunterschrift, ein Untermenü oder eine Erklärung, die erst beim Überfahren auftaucht, ist für die Hälfte der Besucher unerreichbar. Wir empfehlen deshalb, den Hover-Zustand ausschließlich zur Betonung einzusetzen und niemals für Inhalte oder Funktionen, die es sonst nirgends gibt.
Wie er technisch entsteht
In CSS steuert die Pseudoklasse :hover die Darstellung. Damit Tastaturnutzer dieselbe Rückmeldung bekommen, wird sie üblicherweise gemeinsam mit :focus-visible definiert.
.button:hover, .button:focus-visible{ background: #0016fb; color: #fff; }Für Geräte ohne Zeiger lässt sich die Regel zusätzlich eingrenzen, sodass sie auf Touchscreens gar nicht erst greift. Die passende Bedingung dafür ist die Medienabfrage (hover: hover).