:hover CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die :hover CSS Pseudoklasse trifft auf ein Element zu, wenn ein Benutzer mit diesem über ein Zeigegerät interagiert. Die Pseudoklasse wird im Allgemeinen 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, verknüpfungsbezogenen Pseudoklasse (:link, :visited oder :active) mit mindestens gleicher Spezifität überschrieben. Um Links angemessen zu gestalten, setzen 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 niemals zutreffen, nur einen Moment nach Berühren eines Elements zutreffen oder weiterhin zutreffen, selbst nachdem der Benutzer aufgehört hat 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
:hover {
/* ... */
}
Beispiele
Grundlegendes 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
| Spezifikation |
|---|
| HTML # selector-hover |
| Selectors Level 4 # hover-pseudo |