CSS :hover-Pseudoklasse
Die :hover-Pseudoklasse wählt das überfahrene Element aus und formatiert es. Sie wird ausgelöst, wenn der Benutzer den Mauszeiger darüber bewegt. Das Überfahren erfordert keine Aktivierung des Zeigegeräts.
Die Pseudoklasse :active kann mit :hover koexistieren. Wenn beide zutreffen, hat :active aufgrund der Kaskadenreihenfolge Vorrang, anstatt :hover strikt zu überschreiben.
INFO
Viele Touch-Geräte unterstützen :hover nicht, da ihnen ein permanenter Hover-Zustand fehlt; beim Tippen auf ein Element wird normalerweise stattdessen :active oder :focus ausgelöst.
Für eine bessere Barrierefreiheit wird empfohlen, dieselben Stile auch für :focus neben :hover anzuwenden. Um sicherzustellen, dass die Stile nur auf Geräten mit Hover-Unterstützung angewendet werden, packen Sie Ihre Regeln in @media (hover: hover) { ... }.
Version
Syntax
CSS :hover-Syntax
:hover {
css declarations;
}Beispiel für die :hover-Pseudoklasse:
CSS :hover-Pseudoklasse Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:hover {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Fahren Sie über die Links, um zu sehen, wie sich die Farbe ändert.
Beispiel für die :hover-Pseudoklasse mit dem <a>-Tag:
CSS :hover-Link-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:hover {
background-color: #555;
color: #eee;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Beispiel für die :hover-Pseudoklasse mit dem <div>-Tag:
CSS :hover-Div-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:hover {
background-color: #444;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>Praxis
Welche Funktion hat der :hover-Selektor in CSS?