hovereffekten

Hovereffekte sind visuelle Veränderungen an Benutzerschnittstellen, die auftreten, wenn der Mauszeiger oder ein anderes Pointer-Gerät über ein Element bewegt wird. Sie dienen der Rückmeldung, der Kennzeichnung von Interaktivität und dem Bereitstellen zusätzlicher Informationen, ohne dass dauerhaft neue Inhalte angezeigt werden müssen.

Technisch werden Hovereffekte meist mit CSS umgesetzt. Der :hover-Pseudo-Klasse wird eine Transition oder Animation zugewiesen. Häufige Effekte betreffen Opacity, Farbe, Hintergrund, Rahmen, Größe oder Transformationen wie Skala oder Verschiebung. Auch Box-Schatten können eine räumliche Wirkung erzeugen.

Zu den Best Practices gehört ein sichtbarer Fokuszustand für Tastaturnutzerinnen und -nutzer, damit Interaktionen auch ohne Maus auffindbar bleiben. Inhalte, die nur durch Hover sichtbar sind, sollten zugänglich bleiben oder per Klick/Fokus erreichbar sein. Vermeide Effekte mit langen Laufzeiten, die die Lesbarkeit beeinträchtigen.

Leistung und Kompatibilität: Transform- und Opacity-Effekte laufen meist in der Compositor-Schicht und sind daher performant. Vermeide Layout-Änderungen, die Reflow verursachen. Nutze gegebenenfalls die reduzierte Motion-Medienabfrage, wenn Nutzer Motion eingeschränkt hat.

Anwendungsbereiche befinden sich typischerweise in Menüs, Karten, Buttons oder Bildgalerien. Hovereffekte sollten konsistent, sinnvoll und barrierearm bleiben. Auf Geräten ohne Maus ist die Hover-Interaktion eingeschränkt, daher sind alternative Interaktionen wichtig.