Cet article montrera la méthode pour appliquer l'effet de survol sur la grille de colonnes dans Tailwind CSS.
Comment appliquer le survol sur la grille de colonnes dans Tailwind ?
Pour appliquer l'effet de survol sur la grille de colonnes dans Tailwind, créez un fichier HTML et utilisez le ' flotter 'classe avec le' grille-cols-
Suivez les étapes fournies pour la mise en œuvre pratique :
Étape 1 : Utiliser la propriété Hover avec la grille de colonnes dans le programme HTML
Créez un programme HTML et utilisez le ' flotter ' propriété avec le ' grille-cols-
< corps >
< div classe = 'grid grid-cols-3 hover:grid-cols-5 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 classe = 'bg-sarcelle-500 p-5' > 7 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 8 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 9 < / div >
< div classe = 'bg-sarcelle-500 p-5' > dix < / div >
< / div >
< / corps >
Ici, dans l'élément parent
- ' grille ” La classe est utilisée pour créer une disposition de grille.
- ' grille-cols-3 ” classe spécifie que la grille doit avoir 3 colonnes de taille égale.
- ' survol:grid-cols-5 ” spécifie que la grille doit être modifiée en 5 colonnes de taille égale lorsqu'une souris passe dessus.
- ' écart-3 ” classe définit un espacement de 3 unités entre chaque élément de la grille.
- ' m-3 ” classe applique une marge de 3 unités autour du conteneur de la grille.
- ' centre de texte ” classe le texte de chaque élément de la grille au centre.
Dans les éléments enfants
- ' ” représente le nombre d'éléments de la grille.
- ' bg-sarcelle-500 ” La classe définit la couleur sarcelle à l'arrière-plan des éléments de la grille.
- ' p-5 ” ajoute un rembourrage de 5 unités au contenu à l'intérieur des éléments
enfants.Étape 2 : vérifier la sortie
Pour vous assurer que l'effet de survol a été appliqué sur la grille de colonnes, affichez la page Web et déplacez la souris sur les éléments de la grille :
On peut voir que lorsque la souris survole l'élément de la grille, le nombre de colonnes change. Cela indique que l'effet de survol a été appliqué avec succès sur la grille de colonnes.
Conclusion
Pour appliquer l'effet de survol sur la grille de colonnes dans Tailwind, utilisez le ' flotter 'classe avec le' grille-cols-
” utilitaire dans le programme HTML. Il change le nombre de colonnes au survol. Pour garantir les modifications, affichez la page Web HTML et passez la souris sur les éléments de la grille. Cet article a démontré la méthode pour appliquer l'effet de survol sur la grille de colonnes dans Tailwind CSS.