: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 auf ein Element zu, wenn ein Benutzer mit einem Zeigegerät interagiert. Die Pseudoklasse wird normalerweise ausgelöst, wenn der Benutzer den Cursor (Mauszeiger) über ein Element bewegt, ohne die Maustaste zu drücken.

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>

Stile, die durch die :hover Pseudoklasse definiert sind, werden von jeder nachfolgenden linkbezogenen Pseudoklasse (:link, :visited, oder :active) überschrieben, die mindestens die gleiche Spezifität besitzt. Um Links richtig zu stylen, platzieren Sie die :hover Regel nach den :link und :visited Regeln, aber vor der :active Regel, wie es durch die LVHA-Reihenfolge definiert ist: :link — :visited — :hover — :active.

Hinweis: Die :hover Pseudoklasse ist auf Touchscreens problematisch. Abhängig vom Browser könnte die :hover Pseudoklasse nie zutreffen, nur für einen Moment nach dem Berühren eines Elements zutreffen oder weiterhin zutreffen, selbst 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 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