Questo articolo illustrerà la procedura per applicare il passaggio del mouse con la decorazione della scatola in Tailwind.
Come applicare l'Hover on Box Decoration Break in Tailwind?
La proprietà CSS 'box-decoration-break' determina il rendering dello sfondo, del bordo e della spaziatura interna per un elemento quando si estende su più righe o colonne. Per applicare l'effetto hover sugli elementi di interruzione della decorazione della scatola, è necessario utilizzare il ' librarsi ” e applica qualsiasi effetto agli elementi.
Dai un'occhiata ai passaggi forniti di seguito per una dimostrazione pratica:
Passaggio 1: utilizzare la proprietà Hover sull'interruzione della decorazione della scatola nel programma HTML
Crea un programma HTML e utilizza qualsiasi proprietà al passaggio del mouse sugli elementi di interruzione della decorazione della scatola. Ad esempio, abbiamo applicato un ' hover:scatola-decorazione-clone ” sull'elemento “scatola decorazione-fetta” e un “ al passaggio del mouse: testo-giallo-500 ” sull'elemento “box-decoration-clone”:
< corpo >
< span classe = 'scatola-decorazione-slice hover:scatola-decorazione-clone bg-teal-600 text-white text-3xl px-2' >
Linux < fratello / >
Suggerimento
< / span >
< fratello >
< fratello >
< span classe = 'scatola-decorazione-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < fratello / >
Suggerimento
< / span >
< / corpo >
Qui:
- IL ' hover:scatola-decorazione-clone ” applica un effetto “scatola-decorazione-clone” quando si passa sopra l'elemento “scatola decorazione-fetta”.
- IL ' al passaggio del mouse: testo-giallo-500 ” cambia il colore del testo in giallo quando si passa sopra l'elemento “box-decoration-clone”.
Passaggio 2: verificare l'output
Eseguire il programma HTML per verificare l'output:
L'output sopra mostra che l'effetto hover è stato applicato agli elementi in base ai quali è stato specificato.
Conclusione
Tailwind CSS offre una raccolta di classi di utilità per applicare effetti al passaggio del mouse a qualsiasi elemento. Per applicare un passaggio del mouse sugli elementi di interruzione della decorazione della scatola, utilizzare il pulsante ' librarsi ” e specificare l'effetto nel programma HTML. Gli utenti possono modificare il colore di sfondo, il colore del testo e il colore del bordo o aggiungere un'ombra a un elemento al passaggio del mouse. Questo articolo ha spiegato la procedura per applicare il passaggio del mouse con la decorazione della scatola in Tailwind.