Ez a cikk bemutatja a lebegtetési effektus alkalmazásának módszerét a sorrácson a Tailwind CSS-ben.
Hogyan alkalmazzuk a Hover on Row Grid alkalmazást Tailwindben?
Ha a lebegési effektust a Tailwind sorrácsán szeretné alkalmazni, hozzon létre egy HTML-fájlt, és használja a „ lebeg ' osztály a ' grid-rows-<érték> ” segédprogramot a HTML programban. Megváltoztatja a sorok számát, amikor az egeret a sorrács fölé viszi. Ezt követően tekintse meg a webes HTML-oldalt, és vigye az egeret rácselemekre a változtatások biztosításához.
Tekintse meg a megadott lépéseket a gyakorlati megvalósításhoz:
1. lépés: Használja a Hover Property-t a sorrács segítségével a HTML programban
Hozzon létre egy HTML programot, és használja a „ lebeg ' ingatlan a ' grid-rows-<érték> ' hasznosság. Például használtuk a „ hover:grid-rows-5 ” osztály a lebegtetés során lévő sorok számának módosításához:
< test >
< div osztály = 'grid grid-rows-3 hover: grid-rows-5 grid-flow-col 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ályt egy rácselrendezés létrehozására használják.
- ' rács-sorok-3 ” osztály határozza meg, hogy a rácsnak 3 egyforma méretű sora legyen.
- ' hover:grid-rows-5 ” osztály a rácsot 5 egyforma méretű sorra változtatja, ha az egeret fölé viszi.
- ' grid-flow-col ” osztály a rácselemeket vízszintesen, oszlopokba helyezi.
- ' 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 ellenőrizni szeretné, hogy a lebegtetési effektust alkalmazták-e a sorrácson, tekintse meg a weboldalt, és vigye az egeret a rácselemekre:
Megfigyelhető, hogy kezdetben 3 sor van, és amikor az egeret fölé viszi, a sorok száma 5-re változott. Ez azt jelzi, hogy a hover effektust sikeresen alkalmazták a sorrácson.
Következtetés
A lebegés effektus a Tailwind sorrácson történő alkalmazásához használja a „ lebeg ' osztály a ' grid-rows-<érték> ” segédprogramot a HTML programban. Módosítja a sorok 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 a Tailwind CSS sorrácsán a lebegési effektus alkalmazásának módszerét szemlélteti.