Cet article illustrera la procédure d'application du survol avec la décoration de la boîte dans Tailwind.
Comment appliquer le Hover on Box Decoration Break dans Tailwind ?
La propriété CSS 'box-decoration-break' détermine le rendu de l'arrière-plan, de la bordure et du rembourrage d'un élément lorsqu'il s'étend sur plusieurs lignes ou colonnes. Pour appliquer l'effet de survol sur les éléments de rupture de décoration de boîte, il est nécessaire d'utiliser le ' flotter ” propriété et appliquer n'importe quel effet aux éléments.
Consultez les étapes ci-dessous pour une démonstration pratique :
Étape 1 : Utiliser la propriété Hover sur la pause de décoration de boîte dans le programme HTML
Créez un programme HTML et utilisez n'importe quelle propriété de survol sur les éléments de décoration de la boîte. Par exemple, nous avons appliqué un « survol:box-decoration-clone ” sur l'élément “box decoration-slice” et une propriété “ survol :texte-jaune-500 » propriété sur l'élément « box-decoration-clone » :
< corps >
< portée classe = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < Br / >
Indice
< / portée >
< Br >
< Br >
< portée classe = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < Br / >
Indice
< / portée >
< / corps >
Ici:
- Le ' survol:box-decoration-clone ' applique un effet 'box-decoration-clone' lorsque l'élément 'box decoration-slice' est survolé.
- Le ' survol :texte-jaune-500 ' change la couleur du texte en jaune lorsque l'élément ' box-decoration-clone ' est survolé.
Étape 2 : vérifier la sortie
Exécutez le programme HTML pour vérifier le résultat :
La sortie ci-dessus montre que l'effet de survol a été appliqué aux éléments selon lesquels il a été spécifié.
Conclusion
Tailwind CSS propose une collection de classes utilitaires pour appliquer des effets de survol à n'importe quel élément. Pour appliquer un survol sur les éléments de rupture de décoration de boîte, utilisez le ' flotter ” propriété et spécifiez l'effet dans le programme HTML. Les utilisateurs peuvent modifier la couleur d'arrière-plan, la couleur du texte et la couleur de la bordure, ou ajouter une ombre à un élément au survol. Cet article a expliqué la procédure d'application du survol avec décoration de boîte dans Tailwind.