Aquest article tracta sobre el procediment d'implementació per aplicar el ratolí i altres estats amb propietats de visibilitat mitjançant Tailwind CSS.
Com aplicar Hover i altres estats amb la utilitat de visibilitat a Tailwind?
La utilitat de visibilitat es pot utilitzar al llarg del desplaçament i altres estats per fer els canvis de visibilitat en la interacció de l'usuari. Hi ha tres classes sota la utilitat de visibilitat, a saber, ' visible ”, “ invisible ”, i “ col·lapse ”. Anem a integrar algunes classes de visibilitat amb estats de flotació en els exemples següents per entendre-ho millor.
Exemple 1: aplicació de l'estat de flotació al llarg de la classe 'invisible'.
En aquest cas, l'element seleccionat s'amagarà quan el cursor de l'usuari passi per sobre de l'element, el codi es mostra a continuació:
< cos >
< div classe = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div classe = 'bg-blue-500 p-3 centre de text arrodonit' > 01 < / div >
< div classe = 'bg-blue-500 p-3 hover: centre de text arrodonit invisible' > 02 < / div >
< div classe = 'bg-blue-500 p-3 centre de text arrodonit' > 03 < / div >
< / div >
< / cos >
Explicació del codi anterior:
- Primer, es crea el div principal que crea un disseny de quadrícula de tres columnes amb un espai entre cada columna i el marge de ' 4px ”. Utilitzant el CSS de Tailwind ' graella ”, “ graella-cols-3 ”, “ escletxa ”, “ meu ”, i “ mx ” classes respectivament.
- A continuació, tres nens' div ” es creen elements i se'ls aplica un estil bàsic.
- Aleshores el ' flotar L'estat o selector en CSS s'assigna al segon 'div' i al ' invisible ' s'assigna separada pels dos punts ' : ' signe. Això fa que el segon div sigui invisible quan el ratolí es passa per sobre.
Vista prèvia de la pàgina web després de la fase d'execució:
El gif anterior mostra que el segon div s'està tornant invisible al passar el cursor del ratolí.
Exemple 2: aplicació de l'estat actiu al llarg de la classe 'invisible'.
L'estat 'actiu' aplica estils quan l'usuari selecciona un element específic i no surt. Igual que els quadres de text quan un usuari comença a introduir dades dins del camp, en aquest moment el camp està actiu. Per obtenir una comprensió més clara de l'estat actiu i com funciona amb la classe 'invisible', visiteu el codi següent:
< cos >< div classe = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div classe = 'bg-blue-500 p-3 centre de text arrodonit' >01< / div >
< div classe = 'bg-blue-500 p-3 active: centre de text arrodonit invisible' >02< / div >
< div classe = 'bg-blue-500 p-3 centre de text arrodonit' >03< / div >
< / div >
< / cos >
En el codi anterior, la classe de ' invisible ' s'assigna al ' actiu 'estat per al segon' div ” element per amagar el segon element div quan es selecciona.
Després de l'execució, la vista prèvia de la pàgina web apareix així:
La sortida anterior mostra que quan es selecciona el segon 'div', l'element es torna invisible.
Conclusió
El gir i altres estats com actiu o focus es poden utilitzar amb les classes proporcionades per la utilitat de visibilitat per modificar les propietats de visibilitat dels elements seleccionats. Per canviar la visibilitat dels elements al passar el cursor del ratolí, la classe de ratolí s'utilitza al llarg de les classes de visibilitat separades pel color com ' flotar: visible ' o ' flotar: invisible ”. Aquest bloc ha explicat el procediment per aplicar els estats de flotació amb la utilitat de visibilitat.