Denne artikkelen vil demonstrere prosedyren for å bruke hover med boksdekorasjon i Tailwind.
Hvordan bruke hover on Box Decoration Break i medvind?
CSS-egenskapen «box-decoration-break» bestemmer gjengivelsen av bakgrunnen, kantlinjen og polstringen for et element når det spenner over flere linjer eller kolonner. For å bruke sveveeffekten på boksdekorasjonsbryteelementer, er det nødvendig å bruke ' sveve ”-egenskapen og bruk hvilken som helst effekt på elementer.
Sjekk ut trinnene nedenfor for en praktisk demonstrasjon:
Trinn 1: Bruk Hover Property på Box Decoration Break i HTML-programmet
Lag et HTML-program og bruk en hvilken som helst hover-egenskap på boksens dekorasjonsbryteelementer. For eksempel har vi brukt en ' hover:box-decoration-clone '-egenskapen på elementet 'boksdekorasjon-skive' og en ' hover:text-yellow-500 '-egenskapen på 'box-decoration-clone'-elementet:
< kropp >
< span klasse = 'boks-dekorasjon-skive hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Hint
< / span >
< br >
< br >
< span klasse = 'boks-dekorasjon-klon hover:tekst-gul-500 bg-grønngrønn-600 tekst-hvit tekst-3xl px-2' >
Linux < br / >
Hint
< / span >
< / kropp >
Her:
- « hover:box-decoration-clone ” bruker en “boks-dekorasjon-klon”-effekt når “boksdekorasjon-skive”-elementet holdes over.
- « hover:text-yellow-500 ' endrer tekstfargen til gul når 'boks-dekorasjon-klon'-elementet holdes over.
Trinn 2: Bekreft utdata
Kjør HTML-programmet for å bekrefte utdataene:
Ovennevnte utdata viser at hover-effekten har blitt brukt på elementene den ble spesifisert i henhold til.
Konklusjon
Tailwind CSS tilbyr en samling verktøyklasser for å bruke sveveeffekter på ethvert element. For å bruke en hover på boksdekorasjonsbryteelementer, bruk ' sveve ”-egenskapen og spesifiser effekten i HTML-programmet. Brukere kan endre bakgrunnsfarge, tekstfarge og kantfarge, eller legge til en skygge til et element når de peker. Denne artikkelen har forklart fremgangsmåten for å bruke hover med boksdekor i Tailwind.