Der CSS- :hoverSelektor ist eine von vielen Pseudoklassen, mit denen Elemente formatiert werden. :hoverwird 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, :hoverwird häufig mit den ,, und Selektoren gepaart :link, die nicht besuchte, besuchte bzw. aktive Links formatieren.:visited:active
Wenn :linkund :visitedRegeln in der CSS-Definition enthalten sind, :hoversollten sie nachfallen. Andernfalls werden die Stile in der :hoverRegel 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 :hoverAuswahl aktiv und der Stil der Schaltfläche ändert sich.
Beachten Sie, dass :hoverdies 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 :hoverin möglichst vielen verschiedenen mobilen Browsern und Geräten gründlich testen .