Tento článek demonstruje metodu použití efektu přechodu na mřížku řádků v Tailwind CSS.
Jak použít ukazatel myši na mřížce řádků ve službě Tailwind?
Chcete-li použít efekt najetí na mřížku řádků v Tailwindu, vytvořte soubor HTML a použijte „ vznášet se “třída s “ grid-rows-
Podívejte se na uvedené kroky pro praktickou implementaci:
Krok 1: Použijte vlastnost Hover s mřížkou řádků v programu HTML
Vytvořte HTML program a použijte „ vznášet se “ nemovitost s “ grid-rows-
< tělo >
< div třída = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div třída = 'bg-teal-500 p-5' > 1 < / div >
< div třída = 'bg-teal-500 p-5' > 2 < / div >
< div třída = 'bg-teal-500 p-5' > 3 < / div >
< div třída = 'bg-teal-500 p-5' > 4 < / div >
< div třída = 'bg-teal-500 p-5' > 5 < / div >
< div třída = 'bg-teal-500 p-5' > 6 < / div >
< div třída = 'bg-teal-500 p-5' > 7 < / div >
< div třída = 'bg-teal-500 p-5' > 8 < / div >
< div třída = 'bg-teal-500 p-5' > 9 < / div >
< div třída = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / tělo >
Zde v nadřazeném prvku
- “ mřížka Třída ” se používá k vytvoření rozvržení mřížky.
- “ mřížka-řádky-3 ” class určuje, že mřížka by měla mít 3 stejně velké řádky.
- “ hover:grid-rows-5 ” třída změní mřížku na 5 stejně velkých řádků, když na ni najedete myší.
- “ grid-flow-col ” třída umístí položky mřížky vodorovně do sloupců.
- “ mezera-3 ” třída nastavuje vzdálenost 3 jednotek mezi každou položkou mřížky.
- “ m-3 Třída ” aplikuje okraj 3 jednotek kolem kontejneru mřížky.
- “ textové centrum ” nastaví text každé položky mřížky na střed.
V podřízených prvcích
- “ ” představuje počet položek mřížky.
- “ bg-teal-500 ” třída nastaví modrozelenou barvu na pozadí položek mřížky.
- “ p-5 ” třída přidá odsazení 5 jednotek k obsahu uvnitř podřízených položek
.Krok 2: Ověřte výstup
Chcete-li ověřit, že byl na mřížku řádků aplikován efekt najetí myší, zobrazte webovou stránku a přesuňte kurzor myši nad položky mřížky:
Lze pozorovat, že zpočátku existují 3 řádky a když na ně najedete myší, počet řádků se změní na 5. To znamená, že efekt přechodu byl úspěšně aplikován na mřížku řádků.
Závěr
Chcete-li použít efekt najetí na mřížku řádků v Tailwindu, použijte „ vznášet se “třída s “ grid-rows-
” v programu HTML. Změní počet řádků při najetí myší. Chcete-li zajistit změny, zobrazte webovou stránku HTML a najeďte myší na položky mřížky. Tento článek ilustruje metodu použití efektu umístění kurzoru na mřížku řádků v Tailwind CSS.