: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
:hover {
/* ... */
}
Beispiele
Einfaches Beispiel
HTML
<a href="#">Try hovering over this link.</a>
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:hover | ||||||||||||
<a> element support | ||||||||||||
All elements support |
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.