Denne artikel vil eksemplificere metoden til at anvende hover-effekten på grid auto flow-værktøjet i Tailwind CSS.
Hvordan anvender man hover på Grid Auto Flow i medvind?
For at anvende svæveeffekten på gitterets autoflow i Tailwind skal du lave en HTML-fil og bruge ' svæve ' klasse med ' grid-flow-
Se på de givne trin til den praktiske implementering:
Trin 1: Brug hover-egenskab med rækkegitteret i HTML-programmet
Opret et HTML-program og brug ' svæve ” ejendom med den ønskede ” grid-flow-
< legeme >
< 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 >
< / legeme >
Her:
- “ gitter ” klasse indstiller elementet som en gitterbeholder.
- “ grid-flow-col ” definerer flowet af gitterelementer i kolonner.
- “ hover:grid-flow-row ” klasse ændrer strømmen af gitterelementer til rækker, når musen svæver over beholderen.
- “ mellemrum-3 ” tilføjer et mellemrum på 3 enheder mellem gitterelementerne.
- “ m-3 ” tilføjer en margen på 3 enheder omkring gitterbeholderen.
- “ tekst-center ” justerer tekstindholdet inde i gitterelementerne til midten.
Trin 2: Bekræft output
For at kontrollere, at svæveeffekten er blevet anvendt på det automatiske gitterflow, skal du se websiden og flytte musen hen over gitterelementerne:
Det kan observeres, at strømmen af gitterelementer i første omgang er i kolonner, og når musen svæver over dem, ændres strømmen til rækker. Dette indikerer, at svæveeffekten er blevet anvendt på det automatiske gitterflow.
Konklusion
For at anvende svæveeffekten på nettets autoflow i Tailwind skal du bruge ' svæve ' klasse med den ønskede ' grid-flow-