Denne artikel vil demonstrere metoden til at anvende svæveeffekten på kolonnegitteret i Tailwind CSS.
Hvordan anvender man hover på kolonnegitter i medvind?
For at anvende svæveeffekten på kolonnegitteret i Tailwind skal du lave en HTML-fil og bruge ' svæve ' klasse med ' grid-cols-
Følg de angivne trin for praktisk implementering:
Trin 1: Brug hover-egenskab med kolonnegitteret i HTML-programmet
Opret et HTML-program og brug ' svæve ' ejendom med ' grid-cols-
< legeme >
< 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 >
< / legeme >
Her i det overordnede
- “ gitter ” klasse bruges til at skabe et gitterlayout.
- “ grid-cols-3 ” klasse angiver, at gitteret skal have 3 lige store kolonner.
- “ hover:grid-cols-5 ” klasse angiver, at gitteret skal ændres til 5 lige store kolonner, når en mus svæver over det.
- “ 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 sikre, at svæveeffekten er blevet anvendt på kolonnegitteret, skal du se websiden og flytte musen hen over gitterelementerne:
Det kan ses, at når musen svæver over gitterelementet, ændres antallet af kolonner. Det indikerer, at svæveeffekten er blevet anvendt med succes på kolonnegitteret.
Konklusion
For at anvende svæveeffekten på kolonnegitteret i Tailwind skal du bruge ' svæve ' klasse med ' grid-cols-
”-værktøjet i HTML-programmet. Det ændrer antallet af kolonner, når du svæver. For at sikre ændringer skal du se web-HTML-siden og holde musen over gitterelementer. Denne artikel har demonstreret metoden til at anvende svæveeffekten på kolonnegitteret i Tailwind CSS.