Ta članek bo prikazal metodo za uporabo učinka lebdenja na mreži vrstic v Tailwind CSS.
Kako uporabiti lebdenje na mreži vrstic v Tailwind?
Če želite uporabiti učinek lebdenja na mreži vrstic v Tailwindu, naredite datoteko HTML in uporabite » lebdeti ' razred z ' grid-rows-
Oglejte si podane korake za praktično izvedbo:
1. korak: Uporabite lastnost Hover z mrežo vrstic v programu HTML
Ustvarite program HTML in uporabite » lebdeti » Lastnost z » grid-rows-
< telo >
< div razred = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div razred = 'bg-teal-500 p-5' > 1 < / div >
< div razred = 'bg-teal-500 p-5' > 2 < / div >
< div razred = 'bg-teal-500 p-5' > 3 < / div >
< div razred = 'bg-teal-500 p-5' > 4 < / div >
< div razred = 'bg-teal-500 p-5' > 5 < / div >
< div razred = 'bg-teal-500 p-5' > 6 < / div >
< div razred = 'bg-teal-500 p-5' > 7 < / div >
< div razred = 'bg-teal-500 p-5' > 8 < / div >
< div razred = 'bg-teal-500 p-5' > 9 < / div >
< div razred = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / telo >
Tukaj, v nadrejenem elementu
- “ mreža ” se uporablja za ustvarjanje mrežne postavitve.
- “ grid-rows-3 ” določa, da mora imeti mreža 3 enako velike vrstice.
- “ hover:grid-rows-5 ” razred spremeni mrežo v 5 enakih vrstic, ko miško premaknete nad njo.
- “ grid-flow-col ” postavlja elemente mreže vodoravno v stolpce.
- “ vrzel-3 ” nastavi razmik 3 enot med vsakim elementom mreže.
- “ m-3 ” uporabi rob 3 enot okoli vsebnika mreže.
- “ besedilno središče ” nastavi besedilo vsakega elementa mreže na sredino.
V podrejenih elementih
- “ ” predstavlja število elementov mreže.
- “ bg-teal-500 ” nastavi modrozeleno barvo za ozadje elementov mreže.
- “ p-5 ” doda oblazinjenje 5 enot vsebini znotraj podrejenih elementov
.2. korak: Preverite izhod
Če želite preveriti, ali je bil učinek lebdenja uporabljen na mreži vrstic, si oglejte spletno stran in premaknite miško nad elemente mreže:
Opazimo lahko, da so na začetku 3 vrstice in ko se miška pomakne nad njih, se število vrstic spremeni na 5. To pomeni, da je bil učinek lebdenja uspešno uporabljen na mreži vrstic.
Zaključek
Če želite uporabiti učinek lebdenja na mreži vrstic v Tailwindu, uporabite » lebdeti ' razred z ' grid-rows-
” v programu HTML. Spremeni število vrstic ob premikanju miške. Če želite zagotoviti spremembe, si oglejte spletno stran HTML in premaknite miško na elemente mreže. Ta članek je ponazoril metodo za uporabo učinka lebdenja na mreži vrstic v Tailwind CSS.