Denne artikel vil demonstrere metoden til at anvende svæveeffekten på rækkegitteret i Tailwind CSS.
Hvordan anvender man Hover på Row Grid i medvind?
For at anvende svæveeffekten på rækkegitteret i Tailwind skal du lave en HTML-fil og bruge ' svæve ' klasse med ' gitterrækker-
Tjek de givne trin til praktisk implementering:
Trin 1: Brug hover-egenskab med rækkegitteret i HTML-programmet
Opret et HTML-program og brug ' svæve ' ejendom med ' gitterrækker-
< legeme >
< 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 >
< / legeme >
Her i det overordnede
- “ gitter ” klasse bruges til at skabe et gitterlayout.
- “ gitter-rækker-3 ” klasse angiver, at gitteret skal have 3 lige store rækker.
- “ hover:grid-rows-5 ” klasse ændrer gitteret til 5 lige store rækker, når en mus svæver over den.
- “ grid-flow-col ” klasse placerer gitterelementerne vandret i kolonner.
- “ mellemrum-3 ” klasse indstiller en afstand på 3 enheder mellem hver gitterelement.
- “ m-3 ” klasse anvender en margen på 3 enheder omkring gitterbeholderen.
- “ tekst-center ” klasse sætter teksten for hvert gitterelement til midten.
I de underordnede
- “ ” repræsenterer antallet af gitterelementer.
- “ bg-teal-500 ” klasse indstiller den blågrønne farve til baggrunden for gitterelementer.
- “ p-5 ” klasse tilføjer en polstring på 5 enheder til indholdet inde i de underordnede
-elementer.Trin 2: Bekræft output
For at kontrollere, at svæveeffekten er blevet anvendt på rækkegitteret, skal du se websiden og flytte musen hen over gitterelementerne:
Det kan observeres, at der i starten er 3 rækker, og når musen svæver over den, er antallet af rækker ændret til 5. Dette indikerer, at svæveeffekten er blevet anvendt med succes på rækkegitteret.
Konklusion
For at anvende svæveeffekten på rækkegitteret i Tailwind skal du bruge ' svæve ' klasse med ' gitterrækker-
”-værktøjet i HTML-programmet. Det ændrer antallet af rækker ved svævning. For at sikre ændringer skal du se web-HTML-siden og holde musen over gitterelementer. Denne artikel har illustreret metoden til at anvende svæveeffekten på rækkegitteret i Tailwind CSS.