: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
: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 |