In diesem Artikel wird die Methode zum Anwenden des Hover-Effekts auf das Grid-Auto-Flow-Dienstprogramm in Tailwind CSS erläutert.
Wie wende ich „Hover on Grid Auto Flow“ bei Rückenwind an?
Um den Hover-Effekt auf den automatischen Rasterfluss in Tailwind anzuwenden, erstellen Sie eine HTML-Datei und verwenden Sie das „ schweben ” Klasse mit dem „ Grid-Flow-
Schauen Sie sich die angegebenen Schritte für die praktische Umsetzung an:
Schritt 1: Verwenden Sie die Hover-Eigenschaft mit dem Zeilenraster im HTML-Programm
Erstellen Sie ein HTML-Programm und verwenden Sie das „ schweben „Immobilie mit dem gewünschten“ Grid-Flow-
< Körper >
< div Klasse = „grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center“ >
< div Klasse = „bg-teal-500 p-5“ > 1 < / div >
< div Klasse = „bg-teal-500 p-5“ > 2 < / div >
< div Klasse = „bg-teal-500 p-5“ > 3 < / div >
< div Klasse = „bg-teal-500 p-5“ > 4 < / div >
< div Klasse = „bg-teal-500 p-5“ > 5 < / div >
< div Klasse = „bg-teal-500 p-5“ > 6 < / div >
< / div >
< / Körper >
Hier:
- „ Netz Die Klasse „ legt das Element als Rastercontainer fest.
- „ Grid-Flow-Spalte „definiert den Fluss von Rasterelementen in Spalten.
- „ hover:grid-flow-row Die Klasse „ändert den Fluss von Rasterelementen in Zeilen, wenn die Maus über den Container fährt.
- „ Lücke-3 ” fügt eine Lücke von 3 Einheiten zwischen den Rasterelementen hinzu.
- „ m-3 ” fügt einen Rand von 3 Einheiten um den Rastercontainer hinzu.
- „ Text-Center „richtet den Textinhalt innerhalb der Rasterelemente in der Mitte aus.
Schritt 2: Ausgabe überprüfen
Um zu überprüfen, ob der Hover-Effekt auf den automatischen Rasterfluss angewendet wurde, sehen Sie sich die Webseite an und bewegen Sie die Maus über die Rasterelemente:
Es ist zu beobachten, dass der Fluss der Rasterelemente zunächst in Spalten erfolgt und sich der Fluss in Zeilen ändert, wenn die Maus darüber bewegt wird. Dies zeigt an, dass der Hover-Effekt erfolgreich auf den automatischen Rasterfluss angewendet wurde.
Abschluss
Um den Hover-Effekt auf den automatischen Rasterfluss in Tailwind anzuwenden, verwenden Sie die Option „ schweben „Klasse mit dem gewünschten“ Grid-Flow-