Dit artikel demonstreert de methode om het zweefeffect toe te passen op het rijraster in Tailwind CSS.
Hover toepassen op rijraster in Tailwind?
Om het zweefeffect toe te passen op het rijraster in Tailwind, maakt u een HTML-bestand en gebruikt u de zweven ” klas met de “ raster-rijen-
Bekijk de gegeven stappen voor praktische implementatie:
Stap 1: gebruik de eigenschap Hover met het rijraster in het HTML-programma
Maak een HTML-programma en gebruik de ' zweven ” woning met de “ raster-rijen-
< lichaam >
< div klas = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div klas = 'bg-groenblauw-500 p-5' > 1 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 2 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 3 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 4 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 5 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 6 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 7 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 8 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 9 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 10 < / div >
< / div >
< / lichaam >
Hier, in het bovenliggende
- “ rooster ” klasse wordt gebruikt om een rasterlay-out te maken.
- “ raster-rijen-3 ” klasse geeft aan dat het raster 3 rijen van gelijke grootte moet hebben.
- “ hover:raster-rijen-5 ” class verandert het raster in 5 rijen van gelijke grootte wanneer een muis erover beweegt.
- “ grid-flow-col ” klasse plaatst de rasteritems horizontaal in kolommen.
- “ kloof-3 ” klasse stelt een afstand in van 3 eenheden tussen elk rasteritem.
- “ m-3 ” klasse hanteert een marge van 3 eenheden rondom de roostercontainer.
- “ tekstcentrum ” klasse zet de tekst van elk rasteritem in het midden.
In de onderliggende
- “ ” vertegenwoordigt het aantal rasteritems.
- “ bg-groenblauw-500 ” klasse stelt de blauwgroen kleur in op de achtergrond van rasteritems.
- “ p-5 ” klasse voegt een opvulling van 5 eenheden toe aan de inhoud binnen de onderliggende
items.Stap 2: uitvoer controleren
Om te controleren of het zweefeffect is toegepast op het rijraster, bekijkt u de webpagina en beweegt u de muis over de rasteritems:
U kunt zien dat er in eerste instantie 3 rijen zijn en wanneer de muis erover beweegt, is het aantal rijen veranderd in 5. Dit geeft aan dat het zweefeffect met succes is toegepast op het rijraster.
Conclusie
Om het zweefeffect toe te passen op het rijraster in Tailwind, gebruikt u de zweven ” klas met de “ raster-rijen-
” hulpprogramma in het HTML-programma. Het verandert het aantal rijen bij het zweven. Om zeker te zijn van wijzigingen, bekijkt u de web-HTML-pagina en beweegt u de muis over rasteritems. Dit artikel heeft de methode geïllustreerd om het zweefeffect toe te passen op het rijenraster in Tailwind CSS.