Ez a cikk bemutatja a lebegtetési effektus alkalmazásának módszerét az oszloprácsra a Tailwind CSS-ben.
Hogyan alkalmazzuk a Hover on Column Grid alkalmazást a Tailwindben?
A lebegés effektus alkalmazásához az oszloprácsra a Tailwind alkalmazásban, hozzon létre egy HTML-fájlt, és használja a „ lebeg ' osztály a ' grid-cols-<érték> ” segédprogramot a HTML programban. Megváltoztatja az oszlopok számát, amikor az egérmutatót az oszloprács fölé viszi. Ezután tekintse meg a webes HTML-oldalt, és vigye az egeret rácselemekre a változtatások ellenőrzéséhez.
A gyakorlati megvalósításhoz kövesse az alábbi lépéseket:
1. lépés: Használja a Hover Property-t az oszloprács segítségével a HTML programban
Hozzon létre egy HTML programot, és használja a „ lebeg ' ingatlan a ' grid-cols-<érték> ' hasznosság. Például használtuk a „ hover:grid-cols-5 ” tulajdonság az oszlopok számának módosításához az egérmutatón:
< test >
< div osztály = 'grid grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center' >
< div osztály = 'bg-teal-500 p-5' > 1 < / div >
< div osztály = 'bg-teal-500 p-5' > 2 < / div >
< div osztály = 'bg-teal-500 p-5' > 3 < / div >
< div osztály = 'bg-teal-500 p-5' > 4 < / div >
< div osztály = 'bg-teal-500 p-5' > 5 < / div >
< div osztály = 'bg-teal-500 p-5' > 6 < / div >
< div osztály = 'bg-teal-500 p-5' > 7 < / div >
< div osztály = 'bg-teal-500 p-5' > 8 < / div >
< div osztály = 'bg-teal-500 p-5' > 9 < / div >
< div osztály = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / test >
Itt, a szülő
- ' rács ” osztály a rácselrendezés létrehozására szolgál.
- ' grid-cols-3 ” osztály határozza meg, hogy a rácsnak 3 egyforma méretű oszlopa legyen.
- ' hover:grid-cols-5 ” osztály határozza meg, hogy a rácsot 5 egyforma méretű oszlopra kell változtatni, amikor az egeret fölé viszi.
- ' rés-3 ” osztály 3 egységnyi távolságot állít be az egyes rácselemek között.
- ' m-3 ” osztály 3 egységnyi margót alkalmaz a rácskonténer körül.
- ' szövegközpont ” osztály minden rácselem szövegét középre állítja.
A gyermek
- ' ” a rácselemek számát jelenti.
- ' bg-teal-500 ” osztály a kékeszöld színt a rácselemek hátterére állítja.
- ' p-5 ” osztály 5 egységnyi kitöltést ad a gyermek
elemeken belüli tartalomhoz.2. lépés: Ellenőrizze a kimenetet
Ha meg szeretné győződni arról, hogy az egeret alkalmazta az oszloprácson, tekintse meg a weboldalt, és vigye az egeret a rácselemekre:
Látható, hogy amikor az egeret a rácselem fölé viszi, az oszlopok száma megváltozik. Azt jelzi, hogy a lebegtetési effektust sikeresen alkalmazták az oszloprácson.
Következtetés
A lebegő effektus alkalmazásához az oszloprácson a Tailwind alkalmazásban használja a „ lebeg ' osztály a ' grid-cols-<érték> ” segédprogramot a HTML programban. Módosítja az oszlopok számát az egérrel. A változtatások biztosításához tekintse meg a webes HTML-oldalt, és vigye az egeret rácselemekre. Ez a cikk bemutatta a lebegési effektus alkalmazásának módszerét az oszloprácsra a Tailwind CSS-ben.