Denne artikkelen vil eksemplifisere metoden for å bruke hover-effekten på grid auto flow-verktøyet i Tailwind CSS.
Hvordan bruke hover på Grid Auto Flow i medvind?
For å bruke hover-effekten på rutenettets automatiske flyt i Tailwind, lag en HTML-fil og bruk ' sveve ' klasse med ' grid-flow-
Se på de gitte trinnene for praktisk implementering:
Trinn 1: Bruk hover-egenskap med radnettet i HTML-programmet
Lag et HTML-program og bruk ' sveve ' eiendom med ønsket ' grid-flow-
< kropp >
< 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 >
< / kropp >
Her:
- ' Nett ” klasse setter elementet som en rutenettbeholder.
- ' grid-flow-col ” definerer flyten av rutenettelementer i kolonner.
- ' hover:grid-flow-row ” klasse endrer flyten av rutenettelementer til rader når musen svever over beholderen.
- ' gap-3 ” legger til et gap på 3 enheter mellom rutenettelementene.
- ' m-3 ” legger til en margin på 3 enheter rundt gitterbeholderen.
- ' tekst-senter ” justerer tekstinnholdet inne i rutenettelementene til midten.
Trinn 2: Bekreft utdata
For å bekrefte at hover-effekten har blitt brukt på rutenettets automatiske flyt, se nettsiden og flytt musen over rutenettelementene:
Det kan observeres at flyten av rutenettelementer i utgangspunktet er i kolonner, og når musen svever over dem, endres flyten til rader. Dette indikerer at sveveeffekten ble brukt på rutenettets automatiske flyt.
Konklusjon
For å bruke sveveeffekten på rutenettets autoflyt i Tailwind, bruk ' sveve ' klasse med ønsket ' grid-flow-