Hover-Effekt

Definition: Ein Hover-Effekt (Mouse-Over-Effekt, Rollover) ist eine visuelle Veränderung eines Interface-Elements die ausgelöst wird wenn der Nutzer mit dem Mauszeiger über das Element fährt ohne zu klicken. Hover-Effekte dienen primär als Affordance-Signal (Don Norman: «The Design of Everyday Things»): sie kommunizieren dem Nutzer dass ein Element interaktiv ist und angeklickt werden kann. Hover-Effekt-Typen: Farbwechsel (Button-Hintergrundfarbe dunkler; Link-Farbe ändert sich; Hintergrundfarbe erscheint bei vorher transparent); Unterstreichung (Links: Unterstreichung bei Hover wenn im Default-State keine vorhanden); Schatten (Box-Shadow erscheint oder verstärkt sich; Elevation-Effekt); Skalierung (transform: scale(1.05) für Cards, Bilder, Thumbnails); Overlay (Bild-Overlay bei Hover mit Text oder Icon); Cursor-Änderung (cursor: pointer immer bei klickbaren Elementen); Textvarianten (Fettung, Farbwechsel, Pfeil erscheint). Technische Grundlage: CSS :hover-Pseudoklasse; CSS transition-Eigenschaft für animierte Übergänge. Kritische Einschränkung: Hover-Effekte existieren nicht auf Touch-Geräten; ein Design das Informationen ausschließlich per Hover zugänglich macht (Hover-only-Inhalte) schließt alle Touch-Nutzer aus – WCAG 1.3.4 warnt vor Hover-only-Inhalten; @media (hover: hover) ermöglicht Hover-Effekte nur für Geräte mit echtem Hover-Pointer.

Erläuterung

Hover-Effekte als UI-Pattern entstanden mit dem Aufkommen von Maus-basierten Interfaces in den 1980er Jahren: frühe GUI-Systeme (Xerox Star, Apple Macintosh, Windows) signalisierten Klickbarkeit durch Cursor-Wechsel vom Pfeil zum Zeigefinger (cursor: pointer) – der ursprünglichste und universellste Hover-Effekt. Don Norman («The Design of Everyday Things», Basic Books, 1988) prägte das Konzept der «Affordances» und «Signifiers»: gutes Interface-Design macht durch visuelle Gestaltung erkennbar was ein Element tut und wie es bedient wird; Hover-Effekte sind Signifiers die Affordances (Klickbarkeit) kommunizieren. Das Aufkommen von Touch-Screens als primäres Eingabegerät (Apple iPhone, 2007; Steve Jobs Keynote, Macworld San Francisco, 9. Januar 2007) stellte Hover-Effekte fundamental in Frage: auf kapazitiven Touch-Screens existiert kein Hover-Zustand; der Finger berührt oder berührt nicht – ein Zwischen-Zustand ist nicht möglich. Luke Wroblewski («Mobile First», A Book Apart, 2011) formulierte das Problem explizit: Hover-only-Designs (Navigation-Dropdowns die nur per Hover geöffnet werden; Tooltips die nur per Hover erscheinen; Bilder-Overlays mit Produktinformationen die per Hover eingeblendet werden) schließen alle Touch-Nutzer systematisch aus; Luke Wroblewski's «Mobile First»-Ansatz erfordert daher Touch-first-Design: alle primären Informationen und Aktionen müssen ohne Hover erreichbar sein. Das W3C Media Queries Level 4 Feature «hover» (CSS @media (hover: hover)) ermöglicht seit 2014 (Implementierung in Chrome, Firefox, Safari ab 2015–2016) Hover-Effekte gezielt nur für Geräte anzubieten die echten Hover-Pointer haben: @media (hover: hover) { .card:hover { transform: scale(1.02); } } – auf Touch-Geräten wird dieser Block ignoriert; «hover: none» bei Touch-Geräten. Web Accessibility Initiative (W3C WAI; WCAG 2.1 Success Criterion 1.4.13: Content on Hover or Focus; Level AA) spezifizierte 2018 explizit Anforderungen für Hover-Content: zusätzlicher Inhalt der per Hover erscheint (Tooltips, Submenüs) muss (1) vom Nutzer schließbar sein ohne Hover zu beenden, (2) bereitgestellt bleiben wenn Maus auf den Hover-Inhalt selbst bewegt wird, (3) bestehen bleiben bis Nutzer es schließt oder Hover-Auslöser verlässt.

CSS-Implementierung und Transition-Design

CSS :hover und Transition-Grundlagen: Grundstruktur: .button { background-color: #0066cc; transition: background-color 200ms ease-in-out; } .button:hover { background-color: #004e9a; }; transition-Eigenschaften: transition-property (was animiert wird: background-color, transform, box-shadow, all); transition-duration (Dauer: 150–300ms für Hover; unter 100ms zu schnell/flüchtig; über 400ms zu langsam); transition-timing-function: ease (Standard; langsam-schnell-langsam); ease-in (langsam beginnen); ease-out (langsam enden; gut für Hover-Out); ease-in-out (symmetrisch); linear (konstant); cubic-bezier(0.25, 0.46, 0.45, 0.94) für natürliche Bewegung; transition-delay (Verzögerung; bei Hover-Dropdowns 200ms Delay verhindert accidental opening); Kurzform: transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out; Multi-Property: alle relevanten Properties einzeln auflisten statt transition: all (vermeidet ungewollte Animationen); Hover-Out: Hover-Effekt kehrt zurück wenn Maus verlässt; oft schnelleres Rücksetzen (transition: 150ms statt 300ms bei Hover) = natürlicher
Button-Hover-Pattern und Card-Hover: Button-Hover-Standard: Hintergrundfarbe 10–20% dunkler (hsl-Manipulation: hsl(220, 80%, 45%) → hsl(220, 80%, 35%)); Transition 150–200ms; cursor: pointer (zwingend); visuell erkennbar ohne überwältigend; Button-Hover-Varianten: Farbwechsel (Standard); Box-Shadow hinzufügen (Elevation); transform: translateY(-2px) (leichtes Anheben); Icon-Rotation oder -Wechsel bei Toggle-Buttons; Card-Hover-Pattern: Cards die Hover-Interaktivität signalisieren: box-shadow: 0 4px 16px rgba(0,0,0,0.15) im Hover-State (Schatten verstärkt sich); transform: translateY(-4px) (leichtes Anheben); border-color-Wechsel; optionale Overlay-Darstellung (Bild-Overlay mit CTA erscheint bei Hover); Link-Hover: klassisch: color-Wechsel + Unterstreichung; modern: Unterstreichung schon im Default (bessere Accessibility); Hover: Farbton-Variation; hover + transform: nicht für Text-Links (verursacht Layout-Shift); Navigation-Hover: Hintergrundfarbe auf Nav-Item; Bottom-Border-Linie erscheint; Schriftfarbe ändert sich
@media (hover: hover) und Touch-Geräte: Touch-Problem: auf iOS/Android: Erster Tap auf Element = Hover-State wird ausgelöst; Zweiter Tap = Klick; macht Hover-only-Navigation auf Touch unbrauchbar; @media (hover: hover) Lösung: @media (hover: hover) { .card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.2); transform: translateY(-4px); } .nav-item:hover .dropdown { display: block; } }; auf Touch-Geräten (hover: none) wird dieser CSS-Block ignoriert; Touch-only: @media (hover: none) { /* Touch-spezifische Styles */ } combination: @media (hover: hover) and (pointer: fine) { /* Maus mit Hover-Präzision */ }; pointer: fine = Maus; pointer: coarse = Touch/Stylus; was Touch-Nutzer stattdessen erhalten: :active-State (beim Antippen): ausreichendes Feedback; explizite Touch-Action-Areas; keine hover-only-Inhalte; Alternative für Dropdown-Navigation auf Touch: Klick öffnet Dropdown (nicht nur Hover); Button-Toggle für Submenüs

Affordance, prefers-reduced-motion und Hover-Content Accessibility

Hover als Affordance und Signifier: Affordance vs. Signifier (Don Norman 2013 Update von «Design of Everyday Things»): Affordance = die tatsächliche Möglichkeit einer Interaktion; Signifier = das visuelle Signal das die Affordance kommuniziert; Hover-Effekt ist Signifier für die Affordance «klickbar»; Wichtige Affordance-Signale bei Links und Buttons: cursor: pointer (immer bei klickbaren Elementen; NIEMALS vergessen); Farbwechsel (Standard bei Buttons); Unterstreichung (Standard bei Text-Links); Hover-Cursor unterscheidet: cursor: pointer für klickbare Elemente; cursor: default für statische Elemente; cursor: text für Text-Input-Bereiche; cursor: grab/grabbing für draggable Elemente; cursor: not-allowed für disabled; Affordance-Test: wenn Nutzer ohne Hover nicht erkennt dass ein Element klickbar ist hat es ein Affordance-Problem; Beispiel: Ghost-Button ohne Border und ohne Hintergrundfarbe = keine Affordance ohne Hover; Lösung: visuelles Design das auch ohne Hover-Interaktion Klickbarkeit signalisiert; Icon + Label; ausreichend Container-Styling; konsistente Verwendung
prefers-reduced-motion für Hover-Animationen: Problem: Hover-Animationen können vestibuläre Störungen, Migräne oder ADHS-Ablenkung verursachen; prefers-reduced-motion CSS Media Query: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0.01ms !important; } }; oder selektiv: @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Einfacher Schatten ohne Bewegung */ } }; WCAG 2.3.3 (AAA): Animation aus Interaktionen kann deaktiviert werden; für Level AA nicht verpflichtend aber Best Practice; was stattdessen anbieten: instantane (nicht-animierte) Zustandsänderungen; Farbwechsel ohne Bewegung; keine transform-Hover bei reduce-motion; System-Einstellung aktivieren: macOS: Bedienungshilfen → Bewegung → Bewegung reduzieren; Windows: Zugänglichkeit → Visuelle Effekte → Animationen deaktivieren
WCAG 1.4.13 – Hover-Content Accessibility: Anforderung (Level AA; WCAG 2.1): Wenn zusätzlicher Inhalt per Hover (oder Fokus) erscheint: Dismissible: Nutzer kann den Content schließen ohne Hover/Fokus zu bewegen (typisch: Escape-Taste); Hoverable: Nutzer kann Maus auf den erschienenen Content selbst bewegen ohne dass er verschwindet (Tooltip mit Maus drüber fahren um Text lesen zu können); Persistent: Content bleibt sichtbar bis Nutzer Hover/Fokus verlässt oder Content schließt; Anwendungsfälle: Tooltips (erscheinen per Hover; bleiben wenn Maus auf Tooltip bewegt); Hover-Dropdowns (bleiben wenn Maus von Auslöser zu Dropdown bewegt); Custom-Popovers; Implementierung: CSS-only-Hover-Tooltips versagen bei WCAG 1.4.13 wenn sie bei Maus-Bewegung zum Tooltip-Inhalt verschwinden; JavaScript-basierte Tooltips mit mouseenter/mouseleave + Debounce-Verzögerung korrekt; Bibliothek: Floating UI / Tippy.js implementieren WCAG 1.4.13 korrekt

Praxistipp: Fügen Sie @media (hover: hover) als Wrapper für alle Hover-Effekte hinzu die visuell auffällig sind (transform, starke Schattenänderungen): So erhalten nur echte Desktop-Maus-Nutzer die Hover-Animation, während Touch-Nutzer keine unerwünschten Hover-Auslösungen beim Antippen erleben. Zweite wichtige Regel: Stellen Sie sicher dass kein einziger Inhalt auf Ihrer Website ausschließlich per Hover zugänglich ist – jede Information die bei Hover erscheint muss auch ohne Hover erreichbar sein, entweder immer sichtbar oder per Klick zugänglich, damit Touch-Nutzer und Tastaturnutzer nicht ausgeschlossen werden.