Aquest article exemplificarà el mètode per aplicar l'efecte de flotació a la utilitat de flux automàtic de la xarxa a Tailwind CSS.
Com aplicar el cursor al flux automàtic de la graella a Tailwind?
Per aplicar l'efecte de desplaçament del cursor al flux automàtic de la quadrícula a Tailwind, feu un fitxer HTML i utilitzeu el ' flotar ” classe amb “ grid-flow-
Mireu els passos proporcionats per a la seva implementació pràctica:
Pas 1: utilitzeu la propietat Hover amb la quadrícula de files al programa HTML
Creeu un programa HTML i utilitzeu el ' flotar ' propietat amb el ' desitjat ' grid-flow-
< cos >
< div classe = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div classe = 'bg-teal-500 p-5' > 1 < / div >
< div classe = 'bg-teal-500 p-5' > 2 < / div >
< div classe = 'bg-teal-500 p-5' > 3 < / div >
< div classe = 'bg-teal-500 p-5' > 4 < / div >
< div classe = 'bg-teal-500 p-5' > 5 < / div >
< div classe = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / cos >
Aquí:
- “ graella La classe estableix l'element com a contenidor de quadrícula.
- “ quadrícula-flux-col ” defineix el flux dels elements de la quadrícula en columnes.
- “ hover:grid-flow-row ”La classe canvia el flux dels elements de la quadrícula a files quan el ratolí passa per sobre del contenidor.
- “ buit-3 ” afegeix un buit de 3 unitats entre els elements de la quadrícula.
- “ m-3 ” afegeix un marge de 3 unitats al voltant del contenidor de la graella.
- “ centre de text ” alinea el contingut del text dins dels elements de la quadrícula al centre.
Pas 2: verifiqueu la sortida
Per verificar que l'efecte de desplaçament s'ha aplicat al flux automàtic de la quadrícula, visualitzeu la pàgina web i moveu el ratolí per sobre dels elements de la quadrícula:
Es pot observar que inicialment el flux d'elements de la quadrícula és en columnes i quan el ratolí passa per sobre d'ells, el flux es canvia a files. Això indica que l'efecte de flotació s'ha aplicat correctament al flux automàtic de la quadrícula.
Conclusió
Per aplicar l'efecte de flotació al flux automàtic de la quadrícula a Tailwind, utilitzeu el ' flotar 'classe amb el' desitjat grid-flow-