Mouseover: Bedeutung, CSS, JavaScript & Barrierefreiheit

Mouseover bezeichnet eine Interaktion, bei der sich ein Zeiger über einem Element einer Benutzeroberfläche befindet, ohne dass dafür ein Klick erforderlich ist. Häufig verändert sich dabei die Darstellung des Elements oder es werden zusätzliche Informationen eingeblendet.

Im Web wird „Mouseover“ außerdem als Bezeichnung für das JavaScript-Ereignis mouseover verwendet. Dieses Ereignis wird ausgelöst, wenn ein Zeigegerät die Grenzen eines Elements oder eines seiner Nachfahren betritt; die MDN-Dokumentation zum mouseover-Ereignis beschreibt es als MouseEvent, das durch den DOM-Baum nach oben weitergegeben wird.

Der allgemeine Mouseover-Effekt und das technische mouseover-Ereignis sind deshalb nicht identisch. Ein einfacher Farbwechsel beim Darüberfahren lässt sich allein mit CSS umsetzen. JavaScript ist erst erforderlich, wenn beim Zeigerkontakt Programmlogik ausgeführt werden soll, etwa das dynamische Laden einer Vorschau oder das Aktualisieren anderer Seitenelemente.

Typische Mouseover-Effekte

Mouseover-Effekte geben visuelles Feedback oder zeigen kontextbezogene Informationen. Typische Anwendungen sind:

Farb-, Rahmen- oder Schattenänderungen bei Links, Schaltflächen und Karten
Einblenden kurzer Zusatzinformationen in Tooltips
Öffnen von Untermenüs
Vorschauen auf Bilder, Produkte, Diagrammpunkte oder verlinkte Inhalte
Hervorheben einzelner Datensätze in Tabellen und Visualisierungen
Anzeigen zusätzlicher Bedienoptionen in Desktop-Anwendungen.

Ein Mouseover kann rein dekorativ sein, etwa wenn eine Schaltfläche beim Darüberfahren heller wird. Er kann auch funktionale Bedeutung besitzen, wenn dadurch Informationen oder Bedienelemente zugänglich werden. Bei funktionalen Mouseover-Inhalten müssen alternative Eingabemethoden von Anfang an berücksichtigt werden.

HOVER ÜBER MICH

Mouseover mit CSS

Für rein visuelle Hover-Zustände ist in Webseiten meist die CSS-Pseudoklasse :hover zuständig. Die W3C-Spezifikation zu :hover definiert den Zustand für Elemente, die mit einem Zeigegerät bezeichnet werden, ohne dass damit zwingend eine Aktivierung verbunden ist. Auch ein Element, dessen Nachfahre unter dem Zeiger liegt, kann :hover entsprechen.

Ein einfacher Effekt benötigt kein JavaScript:

.button {
  background: #f2f2f2;
  border: 1px solid #777;
}

.button:hover {
  background: #dddddd;
}

Die Regel verändert nur die Darstellung, solange der Hover-Zustand besteht. Für interaktive Elemente ist häufig zusätzlich ein sichtbarer Tastatur-Fokus sinnvoll:

.button:hover,
.button:focus-visible {
  background: #dddddd;
}

Die Beispiele lassen sich direkt im Nioveo Code Previewer testen.

:hover ist eine CSS-Pseudoklasse und kein HTML-Befehl. HTML stellt die Struktur und Semantik eines Elements bereit; CSS beschreibt hier dessen Darstellung im Hover-Zustand.

Mouseover mit JavaScript

JavaScript kann auf das DOM-Ereignis mouseover reagieren. Ein Event Listener wird beispielsweise mit addEventListener() registriert:

const card = document.querySelector(".product-card");

card.addEventListener("mouseover", (event) => {
  console.log("Zeiger über:", event.target);
});

mouseover hat eine Eigenschaft, die bei verschachtelten Elementen leicht zu unerwartetem Verhalten führt: Das Ereignis bubbelt. Es wird am konkreten Zielelement ausgelöst und anschließend zu dessen Vorfahren weitergereicht. Bewegt sich der Zeiger innerhalb einer Karte vom Container auf eine darin liegende Überschrift oder Schaltfläche, können weitere mouseover-Ereignisse entstehen.

Drei Event-Eigenschaften helfen bei der Auswertung:

event.target bezeichnet das Element, auf dem das Ereignis ursprünglich ausgelöst wurde.
event.currentTarget bezeichnet das Element, dessen Event Listener gerade ausgeführt wird.
event.relatedTarget bezeichnet bei mouseover in der Regel das Element, das der Zeiger unmittelbar zuvor verlassen hat.

Diese Eigenschaften sind besonders relevant, wenn ein Listener auf einem gemeinsamen Container mehrere Kindelemente verarbeitet.

Event Delegation mit mouseover

Weil mouseover bubbelt, eignet es sich für Event Delegation. Ein gemeinsamer Listener kann auf Ereignisse vieler untergeordneter Elemente reagieren:

const list = document.querySelector(".product-list");

list.addEventListener("mouseover", (event) => {
  const item = event.target.closest(".product-card");

  if (!item || !list.contains(item)) {
    return;
  }

  item.classList.add("is-hovered");
});

Für eine vollständige Zustandslogik wird zusätzlich ein passendes Verlassen-Ereignis benötigt, beispielsweise mouseout. Bei einfachen Hover-Darstellungen ist CSS in der Regel leichter zu warten, weil kein JavaScript-Zustand synchronisiert werden muss.

Unterschied zwischen `mouseover` und `mouseenter`

mouseover und mouseenter reagieren beide darauf, dass ein Zeiger in den Bereich eines Elements gelangt. Sie unterscheiden sich beim Verhalten innerhalb verschachtelter DOM-Strukturen.

Eigenschaft	`mouseover`	`mouseenter`
Ereignistyp	`MouseEvent`	`MouseEvent`
Bubbling	Ja	Nein
Reaktion beim Wechsel auf Nachfahren	Kann erneut ausgelöst werden	Kein erneutes Auslösen allein wegen des Wechsels auf einen Nachfahren
Typischer Einsatz	Event Delegation, Reaktion auf konkrete Ziele innerhalb eines Containers	Eintritt in einen abgegrenzten Bereich als Ganzes
Passendes Gegenereignis	`mouseout`	`mouseleave`

Die MDN-Dokumentation zu mouseenter erläutert den zentralen Unterschied: mouseenter bubbelt nicht, während ein mouseover am tiefsten betroffenen Element ausgelöst und anschließend durch die Hierarchie weitergegeben wird.

Für eine Karte, die beim erstmaligen Betreten als Ganzes reagieren soll, ist mouseenter häufig einfacher:

const card = document.querySelector(".product-card");

card.addEventListener("mouseenter", () => {
  card.classList.add("is-hovered");
});

card.addEventListener("mouseleave", () => {
  card.classList.remove("is-hovered");
});

Für einen Listencontainer mit vielen dynamisch erzeugten Kindelementen kann mouseover dagegen zweckmäßig sein, weil ein einzelner delegierter Listener genügt.

Mouseover, Hover und Pointer Events

„Hover“ beschreibt den Interaktionszustand allgemein. mouseover ist ein konkretes Mausereignis der Webplattform. Für moderne Anwendungen stehen zusätzlich Pointer Events zur Verfügung. Die W3C-Empfehlung zu Pointer Events definiert eine geräteunabhängigere Ereignisschicht für Maus, Stift und Touch-Eingaben.

pointerover ähnelt mouseover, liefert aber ein PointerEvent und kann zusätzliche Informationen über den Zeiger enthalten, beispielsweise pointerType, Druck oder Stiftwinkel, soweit das Eingabegerät diese Daten bereitstellt. pointerenter verhält sich entsprechend eher wie mouseenter.

const card = document.querySelector(".product-card");

card.addEventListener("pointerenter", (event) => {
  console.log(event.pointerType);
});

Pointer Events ersetzen nicht automatisch alle Mouseover-Logiken. Tastaturbedienung wird durch Pointer Events nicht abgedeckt. Die W3C-Empfehlung weist deshalb darauf hin, für gleichwertige Funktionalität auch höherwertige Ereignisse wie focus und click beziehungsweise eine explizite Tastaturbedienung zu berücksichtigen.

Ein mouseover-Ereignis beweist außerdem nicht zuverlässig, dass tatsächlich eine physische Maus verwendet wurde. Browser können aus Kompatibilitätsgründen Mausereignisse aus anderen Zeigereingaben erzeugen. Wenn die Eingabeart technisch relevant ist, sind Pointer Events mit pointerType die geeignetere Schnittstelle.

Mouseover auf Touchscreens und hybriden Geräten

Touchscreens besitzen häufig keinen dauerhaft schwebenden Zeiger. Hover-basierte Interaktionen dürfen deshalb nicht davon ausgehen, dass jeder Nutzer einen Mouseover auslösen kann. Die MDN-Dokumentation zu :hover auf Touchscreens weist darauf hin, dass Browser den Hover-Zustand je nach Gerät und Implementierung gar nicht, nur kurzzeitig oder nach einer Berührung länger anhaltend abbilden können.

CSS Media Queries können die Hover-Fähigkeit des primären Zeigegeräts abfragen. Die W3C-Spezifikation zum Media Feature hover unterscheidet zwischen hover und none:

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-2px);
  }
}

hover: hover bedeutet, dass das primäre Zeigegerät komfortabel hovern kann. hover: none umfasst unter anderem Geräte ohne Hover-Fähigkeit sowie Eingaben, bei denen Hover nur umständlich emuliert wird.

Bei Geräten mit mehreren Eingabemethoden kann zusätzlich any-hover relevant sein. Eine Kombination aus Touchscreen und angeschlossener Maus ist ein typisches Beispiel. Diese Media Features erkennen keine Tastaturbedienung und eignen sich deshalb vor allem dazu, optionale Darstellungseffekte an Eingabefähigkeiten anzupassen. Wesentliche Funktionen und Informationen müssen unabhängig davon erreichbar bleiben.

Barrierefreiheit bei Mouseover-Inhalten

Ein Hover-Effekt, der nur eine dekorative Farbänderung auslöst, benötigt keine inhaltsgleiche Tastaturaktion. Sobald Mouseover jedoch Informationen oder Funktionen bereitstellt, muss die Bedienung ohne Maus mitgedacht werden.

Das WCAG-2.2-Erfolgskriterium 2.1.1 zur Tastaturbedienung verlangt auf Level A, dass Funktionen grundsätzlich über eine Tastaturschnittstelle bedienbar sind, sofern die zugrunde liegende Funktion keine pfadabhängige Eingabe erfordert. Ein nur per Mouseover zugängliches Untermenü, eine ausschließlich per Hover erreichbare Aktion oder eine nur dort verfügbare wesentliche Information kann diese Anforderung verletzen.

Für zusätzliche Inhalte, die bei Hover oder Tastaturfokus erscheinen und anschließend wieder verschwinden, enthält WCAG 2.2 zum Erfolgskriterium 1.4.13 „Content on Hover or Focus“ auf Level AA drei konkrete Anforderungen:

Dismissible: Überlagernde Zusatzinhalte müssen sich grundsätzlich schließen lassen, ohne Hover oder Fokus zu verschieben
Hoverable: Bei per Hover ausgelösten Zusatzinhalten muss der Zeiger auf den eingeblendeten Inhalt bewegt werden können, ohne dass dieser sofort verschwindet
Persistent: Der Inhalt bleibt sichtbar, bis Hover oder Fokus entfernt wird, der Nutzer ihn schließt oder die Information nicht mehr gültig ist.

Ein zugänglicher Tooltip benötigt neben der Mausinteraktion auch einen Tastaturzugang, beispielsweise über den Fokus des auslösenden Elements. Enthält ein eingeblendetes Element selbst Links, Schaltflächen oder andere fokussierbare Bedienelemente, handelt es sich funktional nicht mehr um einen einfachen Tooltip; die Interaktionslogik muss dann den enthaltenen Bedienelementen gerecht werden.

Auch visuelle Zustände müssen erkennbar bleiben. Farbkontraste lassen sich beispielsweise mit dem Nioveo Farbkontrast Checker prüfen.

Mouseover und verwandte Begriffe

Mehrere Begriffe werden im Alltag synonym verwendet, technisch bezeichnen sie unterschiedliche Dinge.

Begriff	Bedeutung
Mouseover	Allgemein: Zeiger befindet sich über einem Element; technisch auch Name des DOM-Ereignisses `mouseover`
Hover	Allgemeiner Interaktionszustand eines Zeigers; in CSS über `:hover` adressierbar
`mouseenter`	DOM-Ereignis beim Eintritt in einen Elementbereich; bubbelt nicht
`pointerover`	Pointer Event für den Eintritt eines Zeigers in einen Elementbereich; geräteunabhängiger als ein reines Mouse Event
Tooltip	Zusatzinformation, die unter anderem durch Hover oder Fokus ausgelöst werden kann
Rollover	Ältere Bezeichnung für einen visuellen Wechsel beim Darüberfahren, häufig für ausgetauschte Bilder oder Grafiken
Rechtsklick	Aktivierung über eine Maustaste beziehungsweise ein Kontextmenü; kein Mouseover

Ein Tooltip ist damit eine mögliche Reaktion auf Mouseover, aber kein Synonym für den Zustand selbst. Auch ein Rollover beschreibt eher den sichtbaren Effekt als das zugrunde liegende Browserereignis.

Geeignete Einsatzfälle und typische Fehler

Mouseover eignet sich gut für zusätzliches visuelles Feedback, kompakte Vorschauen und ergänzende Informationen, solange die Hauptfunktion auch ohne Hover erreichbar bleibt.

Probleme entstehen vor allem in vier Situationen:

Wesentliche Information existiert nur im Hover-Zustand. Nutzer ohne hover-fähiges Zeigegerät können sie nicht zuverlässig erreichen.
JavaScript verwendet mouseover, obwohl nur ein einmaliger Eintritt in den gesamten Bereich gemeint ist. Verschachtelte Elemente können dann zusätzliche Ereignisse auslösen.
Ein Popup verschwindet beim Wegbewegen vom Trigger sofort. Nutzer können eingeblendete Inhalte nicht mit dem Zeiger erreichen oder bei Vergrößerung vollständig lesen.
Hover wird als Geräteerkennung verwendet. Ein Mouse Event erlaubt keinen sicheren Schluss auf die tatsächlich verwendete Hardware; hybride Geräte besitzen außerdem mehrere Eingabemethoden.

Für rein visuelle Zustände ist CSS :hover meist ausreichend. Für Eintritts- und Austrittslogik eines abgegrenzten Bereichs passen mouseenter und mouseleave beziehungsweise pointerenter und pointerleave. mouseover und pointerover sind besonders nützlich, wenn Bubbling oder Event Delegation bewusst eingesetzt werden.

FAQ

Was bedeutet Mouseover?

Mouseover bedeutet, dass sich ein Zeiger über einem Element befindet, ohne dass ein Klick nötig ist. Webseiten und Programme können darauf mit visuellen Änderungen, Zusatzinformationen oder Programmlogik reagieren.

Ist Mouseover dasselbe wie Hover?

Im allgemeinen Sprachgebrauch meist ja. Technisch ist Hover der Zustand, während mouseover zusätzlich der Name eines konkreten JavaScript-Ereignisses ist.

Was ist der Unterschied zwischen `mouseover` und `mouseenter`?

mouseover bubbelt durch den DOM-Baum und kann beim Wechsel auf Kindelemente erneut ausgelöst werden. mouseenter bubbelt nicht und eignet sich eher für die Logik „Zeiger hat diesen Bereich betreten“.

Wie lässt sich ein Mouseover-Effekt in CSS erstellen?

Mit der Pseudoklasse :hover, beispielsweise .button:hover { background: #ddd; }. Für eine reine Darstellungsänderung ist kein JavaScript erforderlich.

Funktioniert Mouseover auf Smartphones?

Nicht zuverlässig in derselben Form wie mit Maus oder Trackpad. Touchscreens besitzen häufig keinen dauerhaften Hover-Zustand; Browser können Hover gar nicht, kurzzeitig oder als Folge einer Berührung emulieren. Wesentliche Funktionen dürfen deshalb nicht von Mouseover abhängen.

Wann sind Pointer Events besser als Mouse Events?

Pointer Events sind sinnvoll, wenn eine Anwendung verschiedene Zeigegeräte wie Maus, Stift und Touch über eine gemeinsame Ereignisschnittstelle behandeln soll oder Angaben wie pointerType, Druck oder Stiftwinkel benötigt.

Mouseover