V tomto článku sa ukáže spôsob, ako použiť efekt umiestnenia kurzora na mriežku stĺpcov v CSS Tailwind.
Ako použiť kurzor myši na mriežku stĺpcov v Tailwinde?
Ak chcete použiť efekt umiestnenia kurzora na mriežku stĺpcov v Tailwinde, vytvorte súbor HTML a použite „ vznášať sa “trieda s “ grid-cols-
Pre praktickú implementáciu postupujte podľa uvedených krokov:
Krok 1: Použite vlastnosť Hover s mriežkou stĺpcov v programe HTML
Vytvorte HTML program a použite „ vznášať sa ” nehnuteľnosť s “ grid-cols-
< telo >
< div trieda = 'grid grid-cols-3 hover:grid-cols-5 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-cols-3 ” trieda určuje, že mriežka by mala mať 3 rovnako veľké stĺpce.
- “ hover:grid-cols-5 ” špecifikuje, že mriežka by sa mala zmeniť na 5 rovnako veľkých stĺpcov, keď na ňu umiestnite kurzor myši.
- “ 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
Aby ste sa uistili, že efekt vznášania sa použil na mriežku stĺpcov, zobrazte webovú stránku a presuňte myš nad položky mriežky:
Je vidieť, že pri prejdení myšou nad položku mriežky sa zmení počet stĺpcov. Znamená to, že efekt vznášania sa úspešne použil na mriežku stĺpca.
Záver
Ak chcete použiť efekt umiestnenia kurzora na mriežku stĺpcov v Tailwinde, použite „ vznášať sa “trieda s “ grid-cols-
” v programe HTML. Zmení počet stĺpcov pri umiestnení kurzora myši. Ak chcete zabezpečiť zmeny, zobrazte webovú stránku HTML a prejdite myšou na položky mriežky. V tomto článku je demonštrovaný spôsob použitia efektu po umiestnení kurzora myši na mriežku stĺpcov v CSS Tailwind.