V tomto článku sa ukáže spôsob použitia efektu kurzora na mriežku riadkov v systéme CSS Tailwind.
Ako použiť kurzor myši na mriežku riadkov v Tailwinde?
Ak chcete použiť efekt umiestnenia kurzora na mriežku riadkov v Tailwinde, vytvorte súbor HTML a použite „ vznášať sa “trieda s “ grid-rows-
Pozrite si uvedené kroky na praktickú implementáciu:
Krok 1: Použite vlastnosť Hover s mriežkou riadkov v programe HTML
Vytvorte HTML program a použite „ vznášať sa ” nehnuteľnosť s “ grid-rows-
< telo >
< div trieda = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div trieda = 'bg-teal-500 p-5' > 1 < / div >
< div trieda = 'bg-teal-500 p-5' > 2 < / div >
< div trieda = 'bg-teal-500 p-5' > 3 < / div >
< div trieda = 'bg-teal-500 p-5' > 4 < / div >
< div trieda = 'bg-teal-500 p-5' > 5 < / div >
< div trieda = 'bg-teal-500 p-5' > 6 < / div >
< div trieda = 'bg-teal-500 p-5' > 7 < / div >
< div trieda = 'bg-teal-500 p-5' > 8 < / div >
< div trieda = 'bg-teal-500 p-5' > 9 < / div >
< div trieda = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / telo >
Tu v nadradenom prvku
- “ mriežka ” sa používa na vytvorenie rozloženia mriežky.
- “ grid-rows-3 ” trieda určuje, že mriežka by mala mať 3 rovnako veľké riadky.
- “ hover:grid-rows-5 ” trieda zmení mriežku na 5 rovnako veľkých riadkov, keď na ňu umiestnite kurzor myši.
- “ grid-flow-col ” trieda umiestňuje položky mriežky vodorovne do stĺpcov.
- “ medzera-3 ” trieda nastavuje vzdialenosť 3 jednotiek medzi každou mriežkou.
- “ m-3 ” trieda aplikuje okraj 3 jednotiek okolo mriežkového kontajnera.
- “ textové centrum ” nastaví text každej položky mriežky na stred.
V podriadených prvkoch
- “ “ predstavuje počet položiek mriežky.
- “ bg-teal-500 ” nastaví modrozelenú farbu na pozadie položiek mriežky.
- “ p-5 ” trieda pridáva výplň 5 jednotiek k obsahu vnútri podriadených položiek
.Krok 2: Overte výstup
Ak chcete overiť, či sa na mriežku riadkov použil efekt vznášania, zobrazte webovú stránku a presuňte myš nad položky mriežky:
Dá sa pozorovať, že na začiatku sú 3 riadky a keď nad nimi prejde myšou, počet riadkov sa zmení na 5. To znamená, že efekt vznášania sa úspešne aplikoval na mriežku riadkov.
Záver
Ak chcete použiť efekt umiestnenia kurzora na mriežku riadkov v Tailwinde, použite „ vznášať sa “trieda s “ grid-rows-
” v programe HTML. Zmení počet riadkov pri umiestnení kurzora myši. Ak chcete zabezpečiť zmeny, zobrazte webovú stránku HTML a prejdite myšou na položky mriežky. Tento článok ilustruje spôsob použitia efektu umiestenia kurzora na mriežku riadkov v CSS Tailwind.