Dieser Artikel befasst sich mit dem Implementierungsverfahren zum Anwenden von Hover- und anderen Zuständen mit Sichtbarkeitseigenschaften mithilfe von Tailwind CSS.
Wie wende ich Hover und andere Zustände mit dem Sichtbarkeitsdienstprogramm in Tailwind an?
Das Sichtbarkeitsdienstprogramm kann beim Hover und in anderen Zuständen verwendet werden, um die Sichtbarkeit bei Benutzerinteraktion zu ändern. Es gibt drei Klassen unter dem Sichtbarkeitsdienstprogramm, nämlich „ sichtbar “, „ unsichtbar ', Und ' Zusammenbruch “. Lassen Sie uns zum besseren Verständnis einige Sichtbarkeitsklassen mit Hover-Zuständen in die folgenden Beispiele integrieren.
Beispiel 1: Anwenden des Schwebezustands entlang der „unsichtbaren“ Klasse
In diesem Fall wird das ausgewählte Element ausgeblendet, wenn der Cursor des Benutzers über dem Element schwebt. Der Code wird unten angezeigt:
< Körper >
< div Klasse = „Grid Grid-Cols-3 Gap-4 My-4 MX-4“ >
< div Klasse = „bg-blue-500 p-3 abgerundeter Text-Center“ > 01 < / div >
< div Klasse = „bg-blue-500 p-3 hover:unsichtbare abgerundete Textmitte“ > 02 < / div >
< div Klasse = „bg-blue-500 p-3 abgerundeter Text-Center“ > 03 < / div >
< / div >
< / Körper >
Erklärung des obigen Codes:
- Zuerst wird das übergeordnete Div erstellt, das ein dreispaltiges Rasterlayout mit einem Abstand zwischen jeder Spalte und dem Rand von „ erstellt. 4px “. Verwendung des Tailwind-CSS „ Netz “, „ Rasterspalten-3 “, „ Lücke “, „ Mein ', Und ' mx ” Klassen bzw.
- Als nächstes drei Kind „ div „Elemente werden erstellt und ein grundlegender Stil wird auf sie angewendet.
- Dann ist die ' schweben Der Status oder Selektor in CSS wird dem zweiten „div“ und dem „ unsichtbar ” wird ihm getrennt durch den Doppelpunkt zugeordnet „ : ' Zeichen. Dadurch wird das zweite Div unsichtbar, wenn die Maus darüber bewegt wird.
Vorschau der Webseite nach der Ausführungsphase:
Das obige GIF zeigt, dass das zweite Div beim Bewegen der Maus unsichtbar wird.
Beispiel 2: Anwenden des aktiven Zustands entlang der „unsichtbaren“ Klasse
Der Status „aktiv“ wendet Stile an, wenn der Benutzer ein bestimmtes Element auswählt und es nicht verlässt. Genau wie bei Textfeldern ist das Feld zu diesem Zeitpunkt aktiv, wenn ein Benutzer beginnt, Daten in das Feld einzugeben. Um ein klareres Verständnis des aktiven Zustands und seiner Funktionsweise mit der „unsichtbaren“ Klasse zu erhalten, besuchen Sie den folgenden Code:
< Körper >< div Klasse = „Grid Grid-Cols-3 Gap-4 My-4 MX-4“ >
< div Klasse = „bg-blue-500 p-3 abgerundeter Text-Center“ >01< / div >
< div Klasse = „bg-blue-500 p-3 aktiv:unsichtbare abgerundete Textmitte“ >02< / div >
< div Klasse = „bg-blue-500 p-3 abgerundeter Text-Center“ >03< / div >
< / div >
< / Körper >
Im obigen Code ist die Klasse „ unsichtbar ” ist dem „ zugeordnet aktiv ” Zustand für den zweiten „ div ”-Element, um das zweite div-Element auszublenden, wenn es ausgewählt wird.
Nach der Ausführung sieht die Vorschau der Webseite folgendermaßen aus:
Die obige Ausgabe zeigt, dass das Element unsichtbar wird, wenn das zweite „div“ ausgewählt wird.
Abschluss
Der Hover und andere Zustände wie „Aktiv“ oder „Fokus“ können mit den vom Sichtbarkeitsdienstprogramm bereitgestellten Klassen verwendet werden, um die Sichtbarkeitseigenschaften für die ausgewählten Elemente zu ändern. Um die Sichtbarkeit von Elementen beim Bewegen der Maus zu ändern, wird die Hover-Klasse zusammen mit den durch die Farbe getrennten Sichtbarkeitsklassen verwendet, z. B. „ schweben:sichtbar ' oder ' schweben:unsichtbar “. In diesem Blog wurde das Verfahren zum Anwenden von Hover-Zuständen mit dem Sichtbarkeitsdienstprogramm erläutert.