:hover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :hover-CSS-Pseudoklasse passt, wenn der Benutzer mit einem Zeigegerät mit einem Element interagiert, dieses jedoch nicht unbedingt aktiviert. Sie wird im Allgemeinen ausgelöst, wenn der Benutzer mit dem Cursor (Mauszeiger) über ein Element fährt.

Probieren Sie es aus

Von der Pseudoklasse :hover definierte Stile werden von nachfolgenden linkbezogenen Pseudoklassen (:link, :visited, oder :active) mit mindestens gleicher Spezifität überschrieben. Um Links korrekt zu stylen, sollte die :hover-Regel nach den :link- und :visited-Regeln, aber vor der :active-Regel stehen, wie es in der LVHA-Reihenfolge definiert ist: :link:visited:hover:active.

Hinweis: Die Pseudoklasse :hover ist auf Touchscreens problematisch. Abhängig vom Browser kann es sein, dass die Pseudoklasse :hover niemals zutrifft, nur für einen Moment nach Berühren eines Elements trifft oder weiterhin zutrifft, selbst nachdem der Benutzer das Berühren beendet hat, bis ein anderes Element berührt wird. Webentwickler sollten sicherstellen, dass Inhalte auf Geräten mit eingeschränkten oder nicht existierenden Hover-Fähigkeiten zugänglich sind.

Syntax

css
:hover {
  /* ... */
}

Beispiele

Einfaches Beispiel

HTML

html
<a href="#">Try hovering over this link.</a>

CSS

css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}

Ergebnis

Spezifikationen

Specification
HTML
# selector-hover
Selectors Level 4
# hover-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:hover
<a> element support
Non-standard
All elements support
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
See implementation notes.

Siehe auch