Denne artikkelen vil demonstrere metoden for å bruke sveveeffekten på radnettet i Tailwind CSS.
Hvordan bruke hover på radnett i medvind?
For å bruke hover-effekten på radnettet i Tailwind, lag en HTML-fil og bruk ' sveve ' klasse med ' rutenett-rader-
Sjekk ut 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 ' rutenett-rader-
< kropp >
< 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 >
< / kropp >
Her, i det overordnede
- ' Nett Klasse brukes til å lage et rutenettoppsett.
- ' rutenett-rader-3 ” klasse spesifiserer at rutenettet skal ha 3 like store rader.
- ' hover:grid-rows-5 ” klasse endrer rutenettet til 5 like store rader når en mus svever over den.
- ' grid-flow-col ” klasse plasserer rutenettelementene horisontalt i kolonner.
- ' gap-3 ”-klassen setter en avstand på 3 enheter mellom hvert rutenettelement.
- ' m-3 ” klasse gjelder en margin på 3 enheter rundt gitterbeholderen.
- ' tekst-senter ” klasse setter teksten til hvert rutenettelement til sentrum.
I underordnede
- ' ” representerer antall rutenettelementer.
- ' bg-teal-500 ”-klassen setter den blågrønne fargen til bakgrunnen for rutenettelementer.
- ' s-5 ”-klassen legger til en utfylling på 5 enheter til innholdet i underordnede
-elementer.Trinn 2: Bekreft utdata
For å bekrefte at hover-effekten er brukt på radnettet, se nettsiden og flytt musen over rutenettelementene:
Det kan observeres at det i utgangspunktet er 3 rader, og når musen svever over den, har antall rader endret seg til 5. Dette indikerer at hover-effekten har blitt brukt med hell på radnettet.
Konklusjon
For å bruke sveveeffekten på radnettet i Tailwind, bruk ' sveve ' klasse med ' rutenett-rader-
'-verktøyet i HTML-programmet. Det endrer antall rader ved hover. For å sikre endringer, se HTML-siden og hold musen over rutenettelementer. Denne artikkelen har illustrert metoden for å bruke sveveeffekten på radnettet i Tailwind CSS.