:hover

Die :hover CSS Pseudoklasse trifft zu, wenn der Benutzer mit einem Zeigegerät mit einem Element interagiert, es aber nicht notwendigerweise aktiviert. Sie wird im Allgemeinen ausgelöst, wenn der Benutzer mit dem Cursor (Mauszeiger) über ein Element fährt.

Probieren Sie es aus

Stile, die durch die :hover-Pseudoklasse definiert sind, werden von jeder nachfolgenden, mit Links zusammenhängenden Pseudoklasse (:link, :visited, oder :active) mit zumindest gleicher Spezifität überschrieben. Um Links angemessen zu gestalten, setzt man die :hover-Regel nach den :link- und :visited-Regeln, aber vor der :active-Regel, wie durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active.

Hinweis: Die :hover-Pseudoklasse ist auf Touchscreens problematisch. Je nach Browser kann es sein, dass die :hover-Pseudoklasse nie zutrifft, nur für einen Moment nach dem Berühren eines Elements zutrifft oder auch dann noch zutrifft, nachdem der Benutzer aufgehört hat, das Element zu berühren, und bis der Benutzer ein anderes Element berührt. Webentwickler sollten sicherstellen, dass Inhalte auf Geräten mit begrenzten oder nicht vorhandenen 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 Standard
# selector-hover
Selectors Level 4
# the-hover-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch