Atoz CSS Screencast: Die Hover Pseudo -Klasse

Kernpunkte

:hover Pseudoklasse ist ein praktisches Werkzeug, um visuelles Feedback zu geben, wenn die Maus über Links und Schaltflächen schwebt. Es kann auf verschiedene Arten gestylt werden, z. B. die Farbe, Größe oder Ausrichtung eines Elements zu ändern. Die Zuverlässigkeit von Berührungsgeräten ist jedoch nicht konsistent und sollte nicht zum Ausblenden kritischer Informationen verwendet werden. Andere Pseudoklassen können verwendet werden, um Stile verschiedener Linkzustände zu setzen, z. Diese können in einem Reset -Styl -Blatt kombiniert werden, um Standardwerte für das Projekt festzulegen. :visited :active :focus Pseudo-Klasse kann auch verwendet werden, um Dropdown-Menüs in der Hauptnavigation der Website zu erstellen. Dies beinhaltet das Umschalten der Eigenschaft des Untermenus, wenn Sie über den oberen Menüpunkt schweben. Um diese Interaktion auf einem Touch -Gerät gut funktionieren zu können, können Sie JavaScript verwenden, um das Hover -Ereignis in ein Klickereignis umzuwandeln. :hover display Videoerläuter Zusammenfassung Dieses Video untersucht die Anwendung von Pseudoklasse in Textlinks und führt einige andere Link-Pseudo-Klassen ein. Darüber hinaus werden einige der Mängel von

und Lösungen für Nicht-Maus-Benutzer diskutiert. Schließlich erstellen wir ein CSS-Dropdown-Menü, das von ausgelöst wird, und verwenden JQuery, um die Kompatibilität des Touch-Geräts zu verbessern. :hover :hover :hover Linkstil

Die häufigste Verwendung kann darin bestehen, den Benutzern visuelles Feedback zu geben, wenn ihre Maus über Links und Schaltflächen ist.

Der :hover Der Status des Links kann wie folgt mit CSS festgelegt werden:

:hover Der

nach dem Dickdarm repräsentiert eine Pseudoklasse. In diesem Video und dem Rest dieser Serie werden wir viele Pseudoklassen behandeln-Sie können die a:hover { color: red; } und Pseudoklasse in "Episode 5: ID-Selektor" anzeigen. a :enabled In diesem Beispiel wird nur der Farbstil festgelegt, aber alle Attribute können geändert, überschrieben oder abgebrochen werden. Bei Bedarf können Sie die Schriftgröße erhöhen und das Link um 180 Grad drehen - dies wird jedoch nicht empfohlen. :disabled

Es gibt auch einige andere Pseudoklassen, mit denen verschiedene Verbindungszustände gestaltet werden können.

Wird verwendet, um die Links im Browser -Historie des Benutzers zu stylen.

Wird verwendet, um den derzeit klickenden Link zu stylen. Wird verwendet, um den Link zu stylen, der derzeit einen Tastaturfokus hat. Der Benutzer verwendet die Registerkarte, um auf der Seite zu klickbaren Elementen (z. B. Links und Formulareingängen) zu springen. :visited :active Ich kombiniere diese vier Verbindungszustände miteinander im Rahmen des Zurücksetzens des Stylesheet, um angemessene Standardwerte für das gesamte Projekt festzulegen. :focus

Nachteile a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Der Status kann auf jedes Element angewendet werden, nicht nur auf Links, was sie sehr universell macht. Auf dem Touch -Gerät gibt es jedoch keine Maus, um

zu aktivieren.

Wenn der Benutzer einen Link oder eine Taste berührt, wird der :hover -Stil manchmal angewendet, dies ist jedoch unzuverlässig und inkonsistent über Plattformen und Geräte hinweg. Dies kann oft sehr verwirrend sein und unsere Aufgabe ist es, die Benutzererfahrung zu verbessern und es nicht zu verschlimmern!

Für Touch -Geräte vermeiden Sie, kritische Informationen hinter :hover Interaktionen zu verbergen. Wenn Sie dies nicht können, können Sie :hover durch ein Klickereignis mit JavaScript ersetzen.

Einige Benutzer können die Maus nicht verwenden, und wir können ihre Erfahrungen verbessern, indem wir bei Verwendung :hover immer :focus und :active Stile anwenden. Wir können sie mit Kommas in CSS wie folgt trennen:

a:hover { color: red; } Wenn Sie einen CSS-Präprozessor wie SASS verwenden, können Sie ein Mixin erstellen, das diese drei von Kommas getrennten Pseudoklassen ausgibt, ohne sie jedes Mal auszuschreiben.

a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Der staatliche Stil wird nun während der Tastaturinteraktionen mit fokussierbaren oder aktivierbaren Elementen angezeigt.

CSS Dropdown-Menü

Wir haben die grundlegende Verwendung von :hover gesehen, um beim Interagieren mit Links und Schaltflächen ein visuelles Feedback zu geben. Ein weiteres gängiges Designmuster im Web ist das Dropdown-Menü in der Hauptnavigation der Website.

Wir können :hover verwenden, um mit komplexeren CSS -Selektoren zu interagieren, um das Untermenü anzuzeigen und auszublenden. Damit diese Interaktion auf Touch -Geräten gut abschneidet, ist eine kleine Menge JavaScript erforderlich, um das Ereignis in ein Klickereignis umzuwandeln - aber wir werden es später abdecken. :hover Der Trick besteht darin, das Attribut des Untermenuses zu wechseln, wenn sie über den oberen Menüelement schweben. Da

ein CSS -Selektor ist, kann es mit anderen Selektoren kombiniert werden, um komplexeres Verhalten zu erzeugen. Weitere Informationen zu den -attributen finden Sie in "Episode 4: Show". display :hover In diesem Beispiel habe ich eine horizontal ungeordnete Linkliste mit einem Untermenü unter jedem Link. Das Untermenü ist eine weitere ungeordnete Liste, aber die Listenelemente sind übereinander gestapelt. display

Dieses CSS legt dieses anfängliche Layout fest. Die Farb- und Schrifteigenschaften wurden in meine -Fatei verschoben, um den Arbeitsbereich ordentlich zu halten.

page-styles.css Sie können

verwenden, um das Untermenü auszublenden und auf a:hover, a:focus, a:active { /* styles */ } zu setzen, wenn Sie über den Menüpunkt schweben. display: none display: block Dies zeigt das gesamte Untermenü an, aber wir können diesen Selektor anpassen, um das Anzeigen und das Verstecken eines einzelnen Untermenus durch die Verwendung des Untermenüs

zu begrenzen. Weitere Informationen zu diesem und anderen Kombinationssektoren finden Sie in der vorherigen Folge über universelle Geschwisterauswahlern. @mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } > Wenn Sie es vorziehen, dass das Untermenü weniger plötzlich oder versteckt ist, können Sie

mit .menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; } für einen progressiveren Fade -Effekt kombinieren. Ich werde es als Übung lassen und Sie es selbst ausprobieren lassen - erstellen Sie einen Codepen und twittern Sie mich.

Um dieses Dropdown-Menü auf dem Touch-Gerät ordnungsgemäß zu erstellen, können wir ein JavaScript hinzufügen. Dieses JQuery-Snippet aktiviert das Dropdown-Menü, wenn Sie klicken, anstatt zu schweben. Klicken Sie erneut mit einem Link im oberen Menü, es sei denn, es handelt sich um einen leeren Link.

a:hover { color: red; } Arbeitsbeispiele, die dieses Menü mit Touch Device JQuery enthalten, finden Sie auf CodePen.

FAQ

Was ist der Unterschied zwischen :hover , :focus und :active Pseudoklasse in CSS? :hover , :focus und :active sind alle Pseudoklassen in CSS, die auf verschiedene Benutzerinteraktionen angewendet werden. :hover Die Pseudoklasse feuert aus, wenn der Benutzer über das Element schwebt, ohne es zu aktivieren. :focus Die Pseudoklasse wird angewendet, wenn ein Element den Fokus erhält, normalerweise durch den Benutzer, der auf das Eingabeelement klickt oder mit der Tastatur dazu navigiert. :active Die Pseudoklasse wird sofort angewendet, wenn der Benutzer ein Element aktiviert (z. B. Klicken auf einen Link oder eine Schaltfläche).

Wie verwendet man :hover Pseudo-Klasse für verschiedene Elemente? :hover Pseudoklassen können mit jedem HTML-Element verwendet werden, nicht nur mit Links. Es kann verwendet werden, um das Erscheinungsbild von Schaltflächen, Formfeldern, Bildern und anderen Elementen zu ändern, auf denen der Benutzer seine Maus überbessert. Beispiel

a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Können mehrere Pseudoklassen miteinander kombiniert werden? Ja, Sie können mehrere Pseudoklassen miteinander verknüpfen, um spezifischere Selektoren zu erstellen. Zum Beispiel können Sie und :hover Pseudoklasse miteinander kombinieren, um ihr Aussehen zu ändern, wenn Sie über einen Link schweben oder wenn der Link den Fokus hat: :focus

a:hover, a:focus, a:active { /* styles */ } Wie werden Pseudoklassen mit Berührungsgeräten verwendet? :hover Auf dem Touch -Gerät gibt es kein Konzept des Schwebens, da es keinen Cursor gibt. Einige Berührungsgeräte lösen jedoch die -Pseudoklasse aus, wenn der Benutzer ein Element berührt. Wenn Sie nicht vorsichtig sind, kann dies zu unerwartetem Verhalten führen. Betrachten Sie daher unbedingt das Gerät, wenn Sie einen Effekt entwerfen. :hover :hover

Kann ich die Pseudo-Klasse mit CSS-Animation verwenden? :hover Ja, Sie können die Pseudo-Klasse verwenden, um CSS-Animationen auszulösen. Dies kann verwendet werden, um interessante Grafiken zu erstellen, wenn der Benutzer über ein Element schwebt. Beispielsweise können Sie die Pseudo-Klasse verwenden, um die Farbanimation des Links festzulegen: :hover :hover

In diesem Beispiel wechselt die Farbe des Links, wenn der Benutzer darüber hinweg hebt, reibungslos von Blau nach rot. @mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } Diese überarbeitete Ausgabe liefert eine umfassendere und paraphrasierte Version der Eingabe, wobei die ursprüngliche Bedeutung und die Bildpositionen beibehalten werden.

Atoz CSS Screencast: Die Hover Pseudo -Klasse

In Verbindung stehende Artikel