Denne artikkelen vil demonstrere metoden for å bruke sveveeffekten på kolonnenettet i Tailwind CSS.
Hvordan bruke hover på kolonnenettet i medvind?
For å bruke hover-effekten på kolonnenettet i Tailwind, lag en HTML-fil og bruk ' sveve ' klasse med ' grid-cols-
Følg trinnene for praktisk implementering:
Trinn 1: Bruk hover-egenskap med kolonnenettet i HTML-programmet
Lag et HTML-program og bruk ' sveve ' eiendom med ' grid-cols-
< kropp >
< 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 >
< / kropp >
Her, i det overordnede
- ' Nett ” klasse brukes til å lage et rutenettoppsett.
- ' rutenett-cols-3 ” klasse spesifiserer at rutenettet skal ha 3 like store kolonner.
- ' hover:grid-cols-5 ” klasse spesifiserer at rutenettet skal endres til 5 like store kolonner når en mus svever over det.
- ' gap-3 ”-klassen setter en avstand på 3 enheter mellom hvert rutenettelement.
- ' m-3 ” klasse gjelder en margin på 3 enheter rundt gitterbeholderen.
- ' tekstsenter ” 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 å sikre at hover-effekten er brukt på kolonnerutenettet, se nettsiden og flytt musen over rutenettelementene:
Det kan sees at når musen svever over rutenettelementet, endres antall kolonner. Det indikerer at hover-effekten har blitt brukt på kolonnenettet.
Konklusjon
For å bruke sveveeffekten på kolonnenettet i Tailwind, bruk ' sveve ' klasse med ' grid-cols-
'-verktøyet i HTML-programmet. Det endrer antall kolonner ved pekeren. For å sikre endringer, se HTML-siden og hold musen over rutenettelementer. Denne artikkelen har demonstrert metoden for å bruke sveveeffekten på kolonnenettet i Tailwind CSS.