Dit artikel demonstreert de procedure voor het toepassen van hover met boxdecoratie in Tailwind.
Hoe pas je de Hover on Box Decoration Break toe in Tailwind?
De CSS-eigenschap 'box-decoration-break' bepaalt de weergave van de achtergrond, rand en opvulling voor een element wanneer het zich over meerdere regels of kolommen uitstrekt. Om het zweefeffect toe te passen op onderbrekingselementen van de doosdecoratie, is het vereist om de ' zweven ” eigenschap en pas elk effect toe op elementen.
Bekijk de onderstaande stappen voor een praktische demonstratie:
Stap 1: Gebruik Hover Property op Box Decoration Break in HTML-programma
Maak een HTML-programma en gebruik een hover-eigenschap op de onderbrekingselementen van de doosdecoratie. Zo hebben we een “ hover:doos-decoratie-kloon ” eigenschap op het “box decoratie-slice” element en een “ hover:tekst-geel-500 ” eigenschap op het “box-decoration-clone” element:
< lichaam >
< span klas = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Tip
< / span >
< br >
< br >
< span klas = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Tip
< / span >
< / lichaam >
Hier:
- De ' hover:doos-decoratie-kloon ' past een 'box-decoration-clone' -effect toe wanneer er met de muis over het 'box-decoratie-slice' -element wordt bewogen.
- De ' hover:tekst-geel-500 ” verandert de tekstkleur in geel wanneer er over het element 'box-decoration-clone' wordt bewogen.
Stap 2: uitvoer verifiëren
Voer het HTML-programma uit om de uitvoer te verifiëren:
De bovenstaande uitvoer laat zien dat het zweefeffect is toegepast op de elementen volgens welke het was gespecificeerd.
Conclusie
Tailwind CSS biedt een verzameling hulpprogrammaklassen om zweefeffecten toe te passen op elk element. Gebruik de ' zweven ” eigenschap en specificeer het effect in het HTML-programma. Gebruikers kunnen de achtergrondkleur, tekstkleur en randkleur wijzigen of een schaduw toevoegen aan een element tijdens het zweven. In dit artikel is de procedure uitgelegd voor het toepassen van hover met boxdecoratie in Tailwind.