Cet article illustrera la méthode pour appliquer l'effet de survol sur l'utilitaire de flux automatique de grille dans Tailwind CSS.
Comment appliquer le survol sur le flux automatique de la grille dans Tailwind ?
Pour appliquer l'effet de survol sur le flux automatique de la grille dans Tailwind, créez un fichier HTML et utilisez le ' flotter 'classe avec le' grid-flow-
Regardez les étapes données-fournies pour sa mise en œuvre pratique :
Étape 1 : Utiliser la propriété Hover avec la grille de lignes dans le programme HTML
Créez un programme HTML et utilisez le ' flotter 'propriété avec le désiré' grid-flow-
< corps >
< div classe = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div classe = 'bg-sarcelle-500 p-5' > 1 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 2 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 3 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 4 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 5 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 6 < / div >
< / div >
< / corps >
Ici:
- ' grille ” La classe définit l'élément en tant que conteneur de grille.
- ' grille-flux-col ” définit le flux des éléments de grille dans les colonnes.
- ' survol : grille-flux-ligne ” change le flux des éléments de la grille en lignes lorsque la souris survole le conteneur.
- ' écart-3 ” ajoute un écart de 3 unités entre les éléments de la grille.
- ' m-3 ” ajoute une marge de 3 unités autour du conteneur de la grille.
- ' centre de texte ' aligne le contenu du texte à l'intérieur des éléments de la grille sur le centre.
Étape 2 : vérifier la sortie
Pour vérifier que l'effet de survol a été appliqué sur le flux automatique de la grille, affichez la page Web et déplacez la souris sur les éléments de la grille :
On peut observer qu'au départ, le flux des éléments de la grille est en colonnes et lorsque la souris les survole, le flux est modifié en lignes. Cela indique que l'effet de survol est appliqué avec succès au flux automatique de la grille.
Conclusion
Pour appliquer l'effet de survol sur le flux automatique de la grille dans Tailwind, utilisez le ' flotter « classe avec le désiré » grid-flow-