Ta članek bo prikazal metodo za uporabo učinka lebdenja na mreži stolpcev v Tailwind CSS.
Kako uporabiti lebdenje na mreži stolpcev v Tailwindu?
Če želite uporabiti učinek lebdenja na mreži stolpcev v Tailwindu, naredite datoteko HTML in uporabite » lebdeti ' razred z ' grid-cols-
Sledite navedenim korakom za praktično izvedbo:
1. korak: Uporabite lastnost Hover z mrežo stolpcev v programu HTML
Ustvarite program HTML in uporabite » lebdeti » Lastnost z » grid-cols-
< telo >
< div razred = 'grid grid-cols-3 hover:grid-cols-5 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-cols-3 ” določa, da mora imeti mreža 3 enako velike stolpce.
- “ hover:grid-cols-5 ” določa, da se mreža spremeni v 5 enako velikih stolpcev, ko miško premaknete nad njo.
- “ 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 zagotoviti, da je učinek lebdenja uporabljen na mreži stolpcev, si oglejte spletno stran in premaknite miško nad elemente mreže:
Vidimo lahko, da ko miško premaknemo nad element mreže, se spremeni število stolpcev. Označuje, da je bil učinek lebdenja uspešno uporabljen na mreži stolpcev.
Zaključek
Če želite uporabiti učinek lebdenja na mreži stolpcev v Tailwindu, uporabite » lebdeti ' razred z ' grid-cols-
” v programu HTML. Spremeni število stolpcev ob premikanju miške. Če želite zagotoviti spremembe, si oglejte spletno stran HTML in premaknite miško na elemente mreže. Ta članek je prikazal metodo za uporabo učinka lebdenja na mreži stolpcev v Tailwind CSS.