Hover in Schnittstellen: was es ist, Arten von Effekten und Implementierung

Was ist Hover im Webdesign

Hover (vom Englischen “to hover”) — eine visuelle Reaktion eines Schnittstellenelements, wenn der Mauszeiger darüber schwebt. Der Begriff wird sowohl für die CSS-Pseudoklasse :hover als auch für den Zustand des Elements beim Schweben verwendet.

Das Konzept des Hover entstand in den frühen grafischen Oberflächen des Xerox Alto (1973) und wurde mit der Einführung von CSS2 im Jahr 1998 im Web standardisiert. Seitdem ist Hover zu einem festen Bestandteil der Benutzererfahrung auf dem Desktop geworden.

Laut CSS Usage Statistics (2025) verwenden 94% der Websites in den Top 1000 die Pseudoklasse :hover für mindestens ein Element. Hover wird am häufigsten auf Schaltflächen (89%), Links (85%) und Karten (62%) angewendet.

Unterschied zwischen Hover und anderen Zuständen

Hover ≠ active. :hover wird beim Darüberfahren mit der Maus aktiviert, :active im Moment des Klicks. :focus wird aktiviert, wenn ein Element über die Tastatur den Fokus erhält. Jeder Zustand hat seinen Zweck. Hover ist eine Vorschau, active eine Bestätigung der Aktion.

Die Pseudoklasse :hover in CSS

Die Pseudoklasse :hover in CSS wendet Stile auf ein Element an, wenn der Benutzer den Mauszeiger darüber bewegt. Sie funktioniert mit jedem HTML-Element, wird jedoch am häufigsten mit interaktiven Elementen verwendet.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

Die Spezifität des :hover-Selektors ist dieselbe wie die einer Klasse (0,1,0). Wenn Sie Hover für ein bestimmtes Element überschreiben müssen, verwenden Sie einen Selektor mit höherer Spezifität. Die Reihenfolge der Deklaration ist wichtig: Wenn :hover nach :focus deklariert wird, funktioniert Hover bei Fokus möglicherweise nicht.

Kombinierte Pseudoklassen

:hover kann mit anderen Pseudoklassen kombiniert werden, um komplexe Logik zu erstellen. Beispielsweise ändert .card:hover .card__title den Titelstil innerhalb der Karte, wenn über die gesamte Karte gehovt wird. Dadurch können Effekte mit verschachtelter Animation erstellt werden.

Arten von Hover-Effekten

Hover-Effekte werden nach der Art der geänderten Eigenschaft kategorisiert. Jeder Typ ist für verschiedene Szenarien geeignet und erzeugt ein bestimmtes Gefühl beim Benutzer.

Der effektivste Typ ist eine Kombination aus Farb- und Schatteneffekten. Material Design empfiehlt, Höhenänderungen (Änderung der Schattenhöhe) als primäre Art von Hover-Rückmeldung zu verwenden.

Laut Google Material Design (2024) sollte ein Hover-Effekt wahrnehmbar, aber nicht ablenkend sein. Die empfohlene Animationsdauer beträgt 200–300 Millisekunden. Zu schnelle Effekte (unter 100 ms) können unbemerkt bleiben, während zu langsame Effekte (über 500 ms) den Benutzer nerven.

CSS-Übergänge für sanfte Effekte

Die CSS-Eigenschaft transition macht Hover-Effekte geschmeidig, indem sie Eigenschaftsänderungen über die Zeit animiert. Ohne transition wird Hover sofort ausgelöst, was ruckelig und unangenehm fürs Auge wirkt.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

Die Übergangsdauer hängt vom Kontext ab. Für kleine Elemente (Symbole, Links) — 150–200 ms. Für große Elemente (Karten, Modale) — 250–350 ms. Die Easing-Funktion ease-out verlangsamt die Animation am Ende sanft und erzeugt ein natürliches Gefühl.

Empfohlene Vorgehensweise — transition für jede animierte Eigenschaft einzeln angeben. Die Eigenschaft all ist während der Entwicklung praktisch, aber in der Produktion ist es besser, bestimmte Eigenschaften für die Animation zu definieren, um unerwartete Effekte zu vermeiden.

Hover auf Touch-Geräten

Auf Touch-Geräten existiert das Konzept des Hover nicht: Es gibt keinen Cursor, der über ein Element schweben kann. Das Antippen eines Elements löst sofort einen Klick aus und umgeht den Hover-Zustand. Dies verursacht Probleme, wenn die Schnittstelle ausschließlich auf Hover angewiesen ist.

Laut StatCounter (2026) stammen 62% des weltweiten Webverkehrs von mobilen Geräten. Das Fehlen von Hover auf Touch-Bildschirmen zu ignorieren, bedeutet, die UX-Kontrolle für die Mehrheit der Benutzer zu verlieren.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

Die Media Query hover: none ermöglicht die Erkennung, dass ein Gerät Hover nicht unterstützt. Auf solchen Geräten werden Hover-Effekte deaktiviert und die Interaktion basiert auf :active- und :focus-Zuständen. Eine alternative Lösung ist, Hover-Inhalt beim Antippen anzuzeigen (erstes Antippen zeigt Hover, zweites Antippen führt die Aktion aus), aber dieses Muster verschlechtert die UX.

Barrierefreiheit von Hover-Effekten

Die Barrierefreiheit von Hover ist ein kritischer Aspekt, der oft übersehen wird. Benutzer, die die Schnittstelle mit der Tastatur navigieren, können :hover nicht aktivieren. Funktionen, die nur über Hover verfügbar sind, werden für sie unzugänglich.

WCAG 2.2-Regel (Erfolgskriterium 1.4.13 — Inhalt bei Hover oder Fokus): Inhalt, der bei Hover erscheint, muss auch bei Fokus verfügbar sein. Wenn Hover zusätzliche Informationen (Tooltip, Dropdown-Menü) anzeigt, müssen dieselben Informationen bei :focus verfügbar sein.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

Die Media Query prefers-reduced-motion — respektieren Sie die Systemeinstellungen des Benutzers. Wenn der Benutzer Animationen im System deaktiviert hat, sollten Hover-Effekte sofort ohne transition angewendet werden. Dies hilft Menschen mit vestibulären Störungen.

Zusätzliche Empfehlungen: Verwenden Sie Hover nicht für kritische Funktionen, verlassen Sie sich nicht nur auf Farben, um Informationen beim Hover zu vermitteln (fügen Sie ein Symbol oder Text hinzu) und sorgen Sie für ausreichenden Kontrast für Hover-Zustände.