Denne artikel vil demonstrere proceduren for at anvende hover med kassedekoration i Tailwind.
Hvordan anvender man hover on Box Decoration Break i medvind?
CSS-egenskaben 'box-decoration-break' bestemmer gengivelsen af baggrunden, rammen og polstringen for et element, når det strækker sig over flere linjer eller kolonner. For at anvende svæveeffekten på kassedekorationsbrudelementer er det nødvendigt at bruge ' svæve ” egenskab og anvende enhver effekt på elementer.
Tjek nedenstående trin for en praktisk demonstration:
Trin 1: Brug Hover Property på Box Decoration Break i HTML-programmet
Opret et HTML-program og brug enhver svæveegenskab på boksens dekorationsbrudselementer. For eksempel har vi anvendt en ' hover:box-decoration-clone ' ejendom på 'kassedekorationsskive'-elementet og et ' hover:text-yellow-500 egenskaben på 'box-decoration-clone'-elementet:
< legeme >
< span klasse = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Antydning
< / span >
< br >
< br >
< span klasse = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Antydning
< / span >
< / legeme >
Her:
- Det ' hover:box-decoration-clone ' anvender en 'kasse-dekoration-klon'-effekt, når elementet 'kassedekoration-skive' holdes over.
- Det ' hover:text-yellow-500 ” ændrer tekstfarven til gul, når elementet “kasse-dekoration-klon” holdes over.
Trin 2: Bekræft output
Kør HTML-programmet for at bekræfte outputtet:
Ovenstående output viser, at hover-effekten er blevet anvendt på de elementer, som den blev specificeret i henhold til.
Konklusion
Tailwind CSS tilbyder en samling af hjælpeklasser til at anvende hover-effekter til ethvert element. For at anvende et svæv på kassedekorationspauseelementer skal du bruge ' svæve ” egenskab og angiv effekten i HTML-programmet. Brugere kan ændre baggrundsfarve, tekstfarve og kantfarve eller tilføje en skygge til et element, når de svæver. Denne artikel har forklaret proceduren for påføring af hover med kassedekoration i Tailwind.