Hinzufügen von Hover-Effekten
Swipe um das Menü anzuzeigen
Webelemente können auf Benutzerinteraktionen reagieren. Eine der häufigsten Interaktionen ist das Überfahren eines Elements mit der Maus.
In CSS wird dies mit der Pseudoklasse :hover umgesetzt.
Was ist :hover?
Die Pseudoklasse :hover wendet Stile an, wenn der Benutzer den Mauszeiger über ein Element bewegt.
Grundlegende Syntax:
selector:hover {
property: value;
}
Beispiel:
index.html
styles.css
Wenn der Benutzer mit der Maus über die Schaltfläche fährt, ändert sich die Hintergrundfarbe. Befindet sich der Cursor über dem Link, wird der Link unterstrichen.
:hover funktioniert bei den meisten HTML-Elementen. Es wird nur aktiviert, wenn sich der Zeiger über dem Element befindet.
Bedeutung von Hover-Effekten
Hover-Effekte verbessern die Benutzererfahrung, bieten visuelles Feedback und lassen Benutzeroberflächen interaktiver wirken.
Sie werden häufig für Links (<a>) und Schaltflächen sowie Navigationsmenüs verwendet.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Hinzufügen von Hover-Effekten
Webelemente können auf Benutzerinteraktionen reagieren. Eine der häufigsten Interaktionen ist das Überfahren eines Elements mit der Maus.
In CSS wird dies mit der Pseudoklasse :hover umgesetzt.
Was ist :hover?
Die Pseudoklasse :hover wendet Stile an, wenn der Benutzer den Mauszeiger über ein Element bewegt.
Grundlegende Syntax:
selector:hover {
property: value;
}
Beispiel:
index.html
styles.css
Wenn der Benutzer mit der Maus über die Schaltfläche fährt, ändert sich die Hintergrundfarbe. Befindet sich der Cursor über dem Link, wird der Link unterstrichen.
:hover funktioniert bei den meisten HTML-Elementen. Es wird nur aktiviert, wenn sich der Zeiger über dem Element befindet.
Bedeutung von Hover-Effekten
Hover-Effekte verbessern die Benutzererfahrung, bieten visuelles Feedback und lassen Benutzeroberflächen interaktiver wirken.
Sie werden häufig für Links (<a>) und Schaltflächen sowie Navigationsmenüs verwendet.
Danke für Ihr Feedback!
