Der CSS- :hover
Selektor ist eine von vielen Pseudoklassen, mit denen Elemente formatiert werden. :hover
wird verwendet, um Elemente auszuwählen, über die Benutzer den Mauszeiger oder die Maus bewegen. Es kann für alle Elemente verwendet werden, nicht nur für Links.
Wird zum Stylen von Links verwendet, :hover
wird häufig mit den ,, und Selektoren gepaart :link
, die nicht besuchte, besuchte bzw. aktive Links formatieren.:visited
:active
Wenn :link
und :visited
Regeln in der CSS-Definition enthalten sind, :hover
sollten sie nachfallen. Andernfalls werden die Stile in der :hover
Regel nicht auf das ausgewählte Element angewendet.
Syntax:
a:hover { /* CSS declarations */ }
Der Hover-Selektor wendet die in der Regel angegebenen Stile nur an, wenn ein Element in den Hover-Status wechselt. Dies ist normalerweise der Fall, wenn ein Benutzer mit der Maus über das Element fährt.
button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }
Im obigen Beispiel ist das normale Design der Schaltfläche weißer Text auf einer grünen Schaltfläche. Wenn ein Benutzer mit der Maus über die Schaltfläche fährt, wird die Regel mit der :hover
Auswahl aktiv und der Stil der Schaltfläche ändert sich.
Beachten Sie, dass :hover
dies auf Touchscreens problematisch sein kann. Unterschiedliche Hardware- und Browser-Implementierungen können dazu führen, dass die Pseudoklasse in einigen Fällen ausgelöst wird und in anderen nicht. Stellen Sie sicher, dass Sie Elemente :hover
in möglichst vielen verschiedenen mobilen Browsern und Geräten gründlich testen .