: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, aber es 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

.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, Link-bezogenen 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 durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active.

Hinweis: Die :hover Pseudoklasse stellt auf Touchscreens ein Problem dar. Abhängig vom Browser kann es sein, dass die :hover Pseudoklasse niemals zutrifft, nur für einen Moment nach Berühren eines Elements zutrifft oder weiterhin zutrifft, 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-Möglichkeiten 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