Cet article traite de la procédure de mise en œuvre pour appliquer le survol et d'autres états avec des propriétés de visibilité à l'aide de Tailwind CSS.
Comment appliquer le survol et d'autres états avec l'utilitaire de visibilité dans Tailwind ?
L'utilitaire de visibilité peut être utilisé avec le survol et d'autres états pour apporter des modifications de visibilité lors de l'interaction de l'utilisateur. Il existe trois classes sous l'utilitaire de visibilité, à savoir ' visible ”, “ invisible ', et ' effondrement ”. Intégrons quelques classes de visibilité avec des états de survol dans les exemples ci-dessous pour une meilleure compréhension.
Exemple 1 : Application de l'état de survol le long de la classe 'invisible'
Dans ce cas, l'élément sélectionné va être masqué lorsque le curseur de l'utilisateur survole l'élément, le code est affiché ci-dessous :
< corps >
< div classe = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div classe = 'bg-blue-500 p-3 centre de texte arrondi' > 01 < / div >
< div classe = 'bg-blue-500 p-3 hover : centre de texte arrondi invisible' > 02 < / div >
< div classe = 'bg-blue-500 p-3 centre de texte arrondi' > 03 < / div >
< / div >
< / corps >
Explication du code ci-dessus :
- Tout d'abord, la div parent est créée, ce qui crée une disposition de grille à trois colonnes ayant un espace entre chaque colonne et la marge de ' 4px ”. Utilisation du CSS Tailwind ' grille ”, “ grille-cols-3 ”, “ écart ”, “ mon ', et ' MX » classes respectivement.
- Ensuite, trois enfants ' div ” Les éléments sont créés et un style de base leur est appliqué.
- Puis le ' flotter ' L'état ou le sélecteur dans CSS est attribué au deuxième ' div ' et au ' invisible ' lui est attribué séparé par les deux-points ' : ' signe. Cela rend la deuxième div invisible lorsque la souris la survole.
Aperçu de la page Web après la phase d'exécution :
Le gif ci-dessus montre que la deuxième div devient invisible au survol de la souris.
Exemple 2 : Application de l'état actif le long de la classe 'invisible'
L'état 'actif' applique des styles lorsque l'utilisateur sélectionne un élément spécifique et ne le quitte pas. Tout comme les zones de texte lorsqu'un utilisateur commence à saisir des données dans le champ, le champ est actuellement actif. Pour mieux comprendre l'état actif et son fonctionnement avec la classe 'invisible', consultez le code ci-dessous :
< corps >< div classe = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div classe = 'bg-blue-500 p-3 centre de texte arrondi' >01< / div >
< div classe = 'bg-blue-500 p-3 active : centre de texte arrondi invisible' >02< / div >
< div classe = 'bg-blue-500 p-3 centre de texte arrondi' >03< / div >
< / div >
< / corps >
Dans le code ci-dessus, la classe de ' invisible » est attribué au « actif « Etat pour le second » div ” pour masquer le deuxième élément div lorsqu'il est sélectionné.
Après l'exécution, l'aperçu de la page Web apparaît comme ceci :
La sortie ci-dessus montre que lorsque le deuxième 'div' est sélectionné, l'élément devient invisible.
Conclusion
Le survol et d'autres états comme actif ou focus peuvent être utilisés avec les classes fournies par l'utilitaire de visibilité pour modifier les propriétés de visibilité des éléments sélectionnés. Pour modifier la visibilité des éléments au survol de la souris, la classe de survol est utilisée le long des classes de visibilité séparées par la couleur comme ' survol:visible ' ou ' survol:invisible ”. Ce blog a expliqué la procédure pour appliquer les états de survol avec l'utilitaire de visibilité.