Hover-Effekt

Ein Hover-Effekt verändert die Darstellung eines Elements, während ein Zeigegerät darauf zeigt, ohne es zu aktivieren. In CSS wird dafür häufig die Pseudoklasse :hover verwendet. Solche Effekte können signalisieren, dass ein Element bedienbar ist, oder zusätzliche visuelle Rückmeldung geben. Sie eignen sich jedoch nicht als einziger Zugang zu wichtigen Informationen oder Funktionen.

Touch-Geräte kennen kein verlässliches dauerhaftes Hover-Verhalten, und Tastaturnutzer erreichen Elemente über Fokus. Eine robuste Oberfläche bietet daher gleichwertige :focus-visible- und Aktivzustände und macht wesentliche Inhalte unabhängig von Hover zugänglich. Bewegung, Kontrast und Größenänderungen sollten zurückhaltend eingesetzt werden, damit sie Orientierung fördern und keine Layoutsprünge oder unnötige Ablenkung erzeugen.

  • Visuelle Reaktion auf einen Zeiger
  • Hilft, bedienbare Elemente zu kennzeichnen
  • Nicht auf Touch-Geräten voraussetzen
  • Gleichwertige Fokuszustände anbieten
  • Wichtige Inhalte nie ausschließlich per Hover zeigen

Häufige Fragen

Ein Hover-Effekt ist eine visuelle Zustandsänderung, wenn ein Zeiger über einem Element liegt, ohne es bereits zu aktivieren.

Nicht zuverlässig wie mit einer Maus. Wichtige Informationen und Funktionen müssen deshalb auch ohne Hover direkt oder nach eindeutiger Aktivierung zugänglich sein.
Denise Hollstein
Denise Hollstein Mediengestalterin & Webentwicklerin
Zum Glossar