Ako použiť kurzor myši na automatický tok mriežky v systéme Tailwind?

V Tailwind CSS sa trieda pomôcky „grid-auto-flow“ používa na ovládanie správania automatického umiestňovania položiek mriežky v kontajneri mriežky. V predvolenom nastavení je „automatický tok mriežky“ nastavený na riadok, ale používatelia ho môžu zmeniť na stĺpce. Okrem toho môžu používatelia tiež použiť vlastnosť hover na pomôckach „grid-rows“ na použitie štýlov alebo zmenu umiestnenia položiek mriežky, keď nad nimi prejdete myšou.

Tento článok bude príkladom metódy na uplatnenie efektu vznášania sa na pomôcku automatického toku mriežky v Tailwind CSS.

Ako použiť kurzor myši na automatický tok mriežky v systéme Tailwind?

Ak chcete použiť efekt umiestnenia kurzora na automatický tok mriežky v Tailwinde, vytvorte súbor HTML a použite „ vznášať sa “trieda s “ grid-flow- ” v programe HTML. Zmení umiestnenie položiek mriežky, keď na ne umiestnite kurzor myši. Nakoniec si zobrazte webovú stránku HTML a prejdite myšou na položky mriežky, aby ste zabezpečili zmeny.

Pozrite si uvedené kroky na jeho 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 “vlastnosť s požadovaným” grid-flow- ”úžitok. Použili sme napríklad „ hover:grid-flow-row ” na zmenu umiestnenia položiek mriežky zo stĺpca na riadok pri umiestnení kurzora myši:

< telo >

< div trieda = 'grid grid-flow-col hover:grid-flow-row 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 >

< / telo >

Tu:

“ mriežka ” nastaví prvok ako kontajner mriežky.
“ grid-flow-col ” definuje tok položiek mriežky v stĺpcoch.
“ hover:grid-flow-row ” zmení tok položiek mriežky na riadky, keď sa myš presunie nad kontajner.
“ medzera-3 “ pridáva medzi položky mriežky medzeru 3 jednotky.
“ m-3 “ pridáva okraj 3 jednotiek okolo mriežkového kontajnera.
“ textové centrum ” zarovná obsah textu vo vnútri položiek mriežky na stred.

Krok 2: Overte výstup
Ak chcete overiť, či bol na automatický tok mriežky aplikovaný efekt vznášania, zobrazte webovú stránku a presuňte myš nad položky mriežky:

Dá sa pozorovať, že spočiatku je tok položiek mriežky v stĺpcoch a keď nad nimi umiestnite kurzor myši, tok sa zmení na riadky. To znamená, že efekt vznášania sa úspešne aplikuje na automatický tok mriežky.

Záver

Ak chcete použiť efekt umiestnenia kurzora na automatický tok mriežky v Tailwinde, použite „ vznášať sa “trieda s požadovaným” grid-flow- ” v programe HTML. Zmení umiestnenie položiek mriežky, keď na ne umiestnite kurzor myši. Ak chcete zabezpečiť zmeny, zobrazte webovú stránku HTML a prejdite myšou na položky mriežky. Tento článok je príkladom metódy na uplatnenie efektu vznášania sa na pomôcku automatického toku mriežky v Tailwind CSS.

Ako použiť kurzor myši na automatický tok mriežky v systéme Tailwind?