In diesem Artikel wird die Methode zum Anwenden des Hover-Effekts auf das Spaltenraster in Tailwind CSS demonstriert.
Wie wende ich Hover auf dem Säulenraster in Tailwind an?
Um den Hover-Effekt auf das Säulenraster in Tailwind anzuwenden, erstellen Sie eine HTML-Datei und verwenden Sie die Option „ schweben ” Klasse mit dem „ Grid-cols-
Befolgen Sie die angegebenen Schritte zur praktischen Umsetzung:
Schritt 1: Verwenden Sie die Hover-Eigenschaft mit dem Spaltenraster im HTML-Programm
Erstellen Sie ein HTML-Programm und verwenden Sie das „ schweben „Eigenschaft mit dem“ Grid-cols-
< Körper >
< div Klasse = „grid grid-cols-3 hover:grid-cols-5 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 Klasse = „bg-teal-500 p-5“ > 7 < / div >
< div Klasse = „bg-teal-500 p-5“ > 8 < / div >
< div Klasse = „bg-teal-500 p-5“ > 9 < / div >
< div Klasse = „bg-teal-500 p-5“ > 10 < / div >
< / div >
< / Körper >
Hier im übergeordneten
- „ Netz Die Klasse „wird zum Erstellen eines Rasterlayouts verwendet.
- „ Rasterspalten-3 Die Klasse „gibt an, dass das Raster drei gleich große Spalten haben soll.
- „ hover:grid-cols-5 Die Klasse „gibt an, dass das Raster in 5 gleich große Spalten geändert werden soll, wenn die Maus darüber fährt.
- „ Lücke-3 Die Klasse legt einen Abstand von 3 Einheiten zwischen jedem Rasterelement fest.
- „ m-3 Die Klasse „wendet einen Rand von 3 Einheiten um den Rastercontainer an.
- „ Text-Center Die Klasse „Setzt den Text jedes Rasterelements in die Mitte.
In den untergeordneten
- „ „steht für die Anzahl der Rasterelemente.
- „ bg-teal-500 Die Klasse „Setzt die blaugrüne Farbe auf den Hintergrund von Rasterelementen.
- „ S. 5 Die Klasse fügt dem Inhalt innerhalb der untergeordneten
-Elemente einen Abstand von 5 Einheiten hinzu.Schritt 2: Ausgabe überprüfen
Um sicherzustellen, dass der Hover-Effekt auf das Spaltenraster angewendet wurde, sehen Sie sich die Webseite an und bewegen Sie die Maus über die Rasterelemente:
Es ist ersichtlich, dass sich die Anzahl der Spalten ändert, wenn die Maus über das Rasterelement bewegt wird. Es zeigt an, dass der Hover-Effekt erfolgreich auf das Stützenraster angewendet wurde.
Abschluss
Um den Hover-Effekt auf das Säulenraster in Tailwind anzuwenden, verwenden Sie die Option „ schweben ” Klasse mit dem „ Grid-cols-
”-Dienstprogramm im HTML-Programm. Es ändert die Anzahl der Spalten beim Schweben. Um Änderungen sicherzustellen, sehen Sie sich die Web-HTML-Seite an und bewegen Sie die Maus über Rasterelemente. In diesem Artikel wurde die Methode zum Anwenden des Hover-Effekts auf das Spaltenraster in Tailwind CSS demonstriert.