In diesem Artikel wird die Methode zum Anwenden des Hover-Effekts auf das Zeilenraster in Tailwind CSS demonstriert.
Wie wende ich Hover auf dem Zeilenraster in Rückenwind an?
Um den Hover-Effekt auf das Zeilenraster in Tailwind anzuwenden, erstellen Sie eine HTML-Datei und verwenden Sie die Option „ schweben ” Klasse mit dem „ Grid-rows-
Schauen Sie sich die vorgegebenen Schritte zur praktischen 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 „Eigenschaft mit dem“ Grid-rows-
< Körper >
< div Klasse = „grid grid-rows-3 hover:grid-rows-5 grid-flow-col 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.
- „ Rasterzeilen-3 Die Klasse „gibt an, dass das Raster drei gleich große Zeilen haben soll.
- „ hover:grid-rows-5 Die Klasse „Ändert das Raster in 5 gleich große Zeilen, wenn eine Maus darüber fährt.
- „ Grid-Flow-Spalte Die Klasse „Platziert die Rasterelemente horizontal in Spalten.
- „ 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 zu überprüfen, ob der Hover-Effekt auf das Zeilenraster angewendet wurde, sehen Sie sich die Webseite an und bewegen Sie die Maus über die Rasterelemente:
Es ist zu erkennen, dass anfangs drei Zeilen vorhanden sind. Wenn Sie mit der Maus darüber fahren, ändert sich die Anzahl der Zeilen auf fünf. Dies zeigt an, dass der Hover-Effekt erfolgreich auf das Zeilenraster angewendet wurde.
Abschluss
Um den Hover-Effekt auf das Zeilenraster in Tailwind anzuwenden, verwenden Sie die Option „ schweben ” Klasse mit dem „ Grid-rows-
”-Dienstprogramm im HTML-Programm. Es ändert die Anzahl der Zeilen 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 Zeilenraster in Tailwind CSS veranschaulicht.