Verbesserung von Stilen mit Pseudo-Klassen für Benutzeraktionen
Pseudo-Klassen für Benutzeraktionen gestalten ein interaktives Element basierend auf seinem aktuellen Zustand. Dies unterstützt die Nutzerführung und informiert darüber, was gerade passiert ist. In der Regel fügen wir die Zustands-Pseudo-Klassen den <button>- und <a>-Elementen hinzu.
Die Syntax lautet wie folgt:
selector:pseudo-class {
property: value;
}
selectorkann jeder Selektor sein, den wir in den vorherigen Kapiteln betrachtet haben;pseudo-classbenötigt ein:vor der Deklaration, und es wird kein Leerzeichen eingefügt.
Hinweis
Wir betrachten die nützlichsten Zustands-Pseudo-Klassen (
hover,focus,activeundvisited).
:hover
Die Pseudo-Klasse :hover wird verwendet, um auf Benutzeraktionen zu reagieren, wenn sie mit einem Zeigegerät, wie zum Beispiel einer Maus, über ein Element fahren. Dies kann im folgenden Beispiel getestet werden, indem Sie mit der Maus über die button- und a-Elemente fahren, um den Effekt zu sehen.
index.html
styles.css
:focus
Die Pseudo-Klasse :focus funktioniert ähnlich wie die Pseudo-Klasse :hover. Sie reagiert auf den Fokus eines Elements, der in der Regel durch Tastaturnavigation mit der "Tab"-Taste erreicht wird. Um ein konsistentes Verhalten interaktiver Elemente für alle Nutzer zu gewährleisten, wird empfohlen, beide Pseudo-Klassen gemeinsam für das Styling zu verwenden. So erhalten sowohl Maus- als auch Tastaturnutzer das gleiche Erlebnis.
Der Unterschied zwischen :hover und :focus
:hoverreagiert auf Mauszeigeraktivität;:focusreagiert auf Tastaturaktivität ("Tab"-Taste).
Im folgenden Beispiel haben wir dasselbe Element mit verschiedenen Pseudoklassen. Bitte achten Sie auf die Datei styles.css. Es ist zu erkennen, dass sich dieselben Stile für den Hover- und Fokus-Effekt anwenden lassen, indem der Selektor und die Pseudoklasse mit , getrennt werden.
index.html
styles.css
:active
:active wird ausgelöst, wenn ein Element aktiviert wird, zum Beispiel beim Klicken auf einen Link. Obwohl jedes Element aktiviert werden kann, wird diese Pseudoklasse in der Regel für Links und Schaltflächen verwendet.
index.html
styles.css
:visited
Die Pseudo-Klasse :visited wird auf Links angewendet, die bereits besucht wurden. Standardmäßig werden Links blau angezeigt und nach dem Besuch in Lila geändert.
index.html
styles.css
1. Welche Pseudoklasse wird ausgelöst, wenn ein Benutzer mit der Maus über ein Element fährt?
2. Welche Pseudoklasse wird auf einen Link angewendet, der bereits besucht wurde?
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
Can you explain more about how to use :hover and :focus together?
What are some best practices for styling interactive elements with these pseudo-classes?
Can you show examples of using :active and :visited as well?
Awesome!
Completion rate improved to 2.56Verbesserung von Stilen mit Pseudo-Klassen für Benutzeraktionen
Swipe um das Menü anzuzeigen
Pseudo-Klassen für Benutzeraktionen gestalten ein interaktives Element basierend auf seinem aktuellen Zustand. Dies unterstützt die Nutzerführung und informiert darüber, was gerade passiert ist. In der Regel fügen wir die Zustands-Pseudo-Klassen den <button>- und <a>-Elementen hinzu.
Die Syntax lautet wie folgt:
selector:pseudo-class {
property: value;
}
selectorkann jeder Selektor sein, den wir in den vorherigen Kapiteln betrachtet haben;pseudo-classbenötigt ein:vor der Deklaration, und es wird kein Leerzeichen eingefügt.
Hinweis
Wir betrachten die nützlichsten Zustands-Pseudo-Klassen (
hover,focus,activeundvisited).
:hover
Die Pseudo-Klasse :hover wird verwendet, um auf Benutzeraktionen zu reagieren, wenn sie mit einem Zeigegerät, wie zum Beispiel einer Maus, über ein Element fahren. Dies kann im folgenden Beispiel getestet werden, indem Sie mit der Maus über die button- und a-Elemente fahren, um den Effekt zu sehen.
index.html
styles.css
:focus
Die Pseudo-Klasse :focus funktioniert ähnlich wie die Pseudo-Klasse :hover. Sie reagiert auf den Fokus eines Elements, der in der Regel durch Tastaturnavigation mit der "Tab"-Taste erreicht wird. Um ein konsistentes Verhalten interaktiver Elemente für alle Nutzer zu gewährleisten, wird empfohlen, beide Pseudo-Klassen gemeinsam für das Styling zu verwenden. So erhalten sowohl Maus- als auch Tastaturnutzer das gleiche Erlebnis.
Der Unterschied zwischen :hover und :focus
:hoverreagiert auf Mauszeigeraktivität;:focusreagiert auf Tastaturaktivität ("Tab"-Taste).
Im folgenden Beispiel haben wir dasselbe Element mit verschiedenen Pseudoklassen. Bitte achten Sie auf die Datei styles.css. Es ist zu erkennen, dass sich dieselben Stile für den Hover- und Fokus-Effekt anwenden lassen, indem der Selektor und die Pseudoklasse mit , getrennt werden.
index.html
styles.css
:active
:active wird ausgelöst, wenn ein Element aktiviert wird, zum Beispiel beim Klicken auf einen Link. Obwohl jedes Element aktiviert werden kann, wird diese Pseudoklasse in der Regel für Links und Schaltflächen verwendet.
index.html
styles.css
:visited
Die Pseudo-Klasse :visited wird auf Links angewendet, die bereits besucht wurden. Standardmäßig werden Links blau angezeigt und nach dem Besuch in Lila geändert.
index.html
styles.css
1. Welche Pseudoklasse wird ausgelöst, wenn ein Benutzer mit der Maus über ein Element fährt?
2. Welche Pseudoklasse wird auf einen Link angewendet, der bereits besucht wurde?
Danke für Ihr Feedback!
