: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 trifft zu, wenn der Benutzer mit einem Zeigegerät mit einem Element interagiert, es jedoch nicht zwingend aktiviert. In der Regel wird sie ausgelöst, wenn der Benutzer mit dem Cursor (Mauszeiger) über ein Element fährt.

Probieren Sie es aus

.joinBtn {
  width: 10em;
  height: 5ex;
  background-color: gold;
  border: 2px solid firebrick;
  border-radius: 10px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}

.joinBtn:hover {
  background-color: bisque;
}

<p>Would you like to join our quest?</p>
<button class="joinBtn">Confirm</button>

Von der :hover Pseudoklasse definierte Stile werden von jeder nachfolgenden, linkbezogenen Pseudoklasse (:link, :visited oder :active), die mindestens die gleiche Spezifität hat, überschrieben. Um Links angemessen zu stylen, sollten Sie die :hover Regel nach den :link und :visited Regeln, aber vor der :active Regel, gemäß der LVHA-Reihenfolge: :link — :visited — :hover — :active platzieren.

Hinweis: Die :hover Pseudoklasse ist auf Touchscreens problematisch. Abhängig vom Browser könnte die :hover Pseudoklasse niemals zutreffen, nur einen Moment nach Berühren eines Elements zutreffen oder weiterhin zutreffen, selbst nachdem der Benutzer aufgehört hat zu berühren, bis der Benutzer ein anderes Element berührt. Webentwickler sollten sicherstellen, dass Inhalte auf Geräten mit eingeschränkten 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
# selector-hover
Selectors Level 4
# hover-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch