:hover
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die :hover CSS Pseudoklasse selektiert ein Element, wenn ein Nutzer mit einem Zeigegerät darauf interagiert. Die Pseudoklasse wird in der Regel ausgelöst, wenn der Nutzer 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 werden, werden von jedem nachfolgenden, mit Links verbundenen Pseudoklassen (:link, :visited, oder :active) mit mindestens gleicher Spezifität überschrieben. Um Links korrekt zu stylen, platzieren Sie die :hover-Regel nach den :link- und :visited-Regeln, aber vor der :active-Regel, wie in der LVHA-Reihenfolge definiert: :link — :visited — :hover — :active.
Hinweis:
Die :hover-Pseudoklasse ist bei Touchscreens problematisch. Je nach Browser könnte die :hover-Pseudoklasse nie zutreffen, nur einen Moment nach dem Berühren eines Elements zutreffen oder weiterhin zutreffen, selbst nachdem der Nutzer aufgehört hat zu berühren, bis der Nutzer 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
Einfaches 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
| Specification |
|---|
| HTML # selector-hover |
| Selectors Level 4 # hover-pseudo |