Was ist CSS-Hover?
Der :hover-Selektor in CSS wendet Stile auf ein Element an, während der Cursor darüber schwebt. Es wird häufig verwendet, um interaktive Effekte zu erzeugen oder die Aufmerksamkeit auf Elemente zu lenken, wenn mit ihnen interagiert wird.
Sie können ein Element mit dem :hover-Selektor ansprechen, indem Sie seinen Tag-Namen, seine Klasse oder seine ID verwenden.
Zum Beispiel:
.button:hover { background-color: #ff0000; color: #ffffff; } Die Hintergrundfarbe im vorherigen Beispiel wird rot (#ff0000), wenn ein Benutzer mit der Maus über ein Element mit der Klasse „Button“ fährt, während die Textfarbe weiß wird (#ffffff).
Verbindungen in Java
Durch die Kombination des :hover-Selektors mit anderen CSS-Elementen wie Schriftgröße, Rahmen oder Transformation können verschiedene Hover-Effekte erzeugt werden. Es ist ein leistungsstarkes Tool zur Verbesserung des visuellen Feedbacks und der Interaktivität Ihrer Website oder Anwendung.
Syntax:
:hover { css declarations; } Nehmen wir einige Beispiele, um Hover mithilfe von CSS zu verstehen:
Beispiel 1:
HTML Quelltext:
Hover Me
CSS-Code:
.hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } Erläuterung:
Im obigen Beispiel haben wir eine Schaltfläche mit einer Klassen-Hover-Schaltfläche. Die anfänglichen Farbkombinationen der Schaltfläche sind ein hellgrauer Hintergrund (#eaeaea) und dunkelgrauer Text (#333333). Wenn Sie mit der Maus über die Schaltfläche fahren, ändert sich die Hintergrundfarbe in Rot (#ff0000) und die Textfarbe in Weiß (#ffffff).
Mit einer Dauer von 0,3 Sekunden und einer Ease-Timing-Funktion sorgt die Transition-Eigenschaft in der Hover-Button-Klasse für einen fließenden Übergang für die Änderung der Hintergrundfarbe, wenn sich die Maus über der Schaltfläche befindet.
Andere Elemente, wie z. B. Links ( ), Bilder ( ), divs ( ) oder jedes andere Element, das Sie interaktiv machen möchten, können ähnliche Hover-Effekte verwenden. Sie können verschiedene Hover-Effekte erstellen, die Ihren Designanforderungen entsprechen, indem Sie die Eigenschaften und Werte im :hover-Selektor ändern.
Beispiel 2: Bildzoomeffekt
HTML Quelltext:
CSS-Code:
.image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } Beispiel 3: Link-Unterstreichungseffekt
HTML Quelltext:
<a href="#">Hover Me</a>
CSS-Code:
.underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } Funktion von Hover in CSS
Sie können die Interaktivität und die visuellen Effekte Ihrer Webseiten verbessern, indem Sie die CSS:hover-Funktion verwenden, die eine Vielzahl von Vorteilen und Funktionen bietet. Im Folgenden sind einige wesentliche CSS-Hover-Funktionen aufgeführt: