Ez a cikk bemutatja azt az eljárást, hogyan lehet lebegni a dobozdíszítéssel a Tailwindben.
Hogyan alkalmazzuk a Hover on Box Dekorációs szünetet hátszélben?
A „box-decoration-break” CSS-tulajdonság határozza meg egy elem hátterének, szegélyének és kitöltésének megjelenítését, ha az több soron vagy oszlopon átível. A lebegés hatásának alkalmazásához a doboz dekorációs törőelemeken a „ lebeg ” tulajdonságot, és alkalmazzon bármilyen hatást az elemekre.
Tekintse meg az alábbi lépéseket a gyakorlati bemutatóhoz:
1. lépés: Használja a Hover Property-t a Box Decoration Break-nél a HTML programban
Hozzon létre egy HTML-programot, és használjon bármilyen lebegő tulajdonságot a doboz dekorációs törőelemein. Például alkalmaztunk egy „ hover:box-decoration-clone ” tulajdonság a „dobozdíszítés-szelet” elemen és egy „ hover:text-yellow-500 ” tulajdonság a „box-decoration-clone” elemen:
< test >
< span osztály = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Célzás
< / span >
< br >
< br >
< span osztály = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Célzás
< / span >
< / test >
Itt:
- A ' hover:box-decoration-clone ” „dobozdíszítés-klón” effektust alkalmaz, amikor a „dobozdíszítés-szelet” elem fölé viszi az egérmutatót.
- A ' hover:text-yellow-500 ” sárgára változtatja a szöveg színét, ha a „box-decoration-clone” elem fölé viszi az egérmutatót.
2. lépés: Ellenőrizze a kimenetet
Futtassa a HTML programot a kimenet ellenőrzéséhez:
A fenti kimenet azt mutatja, hogy a lebegési effektust alkalmazták azokra az elemekre, amelyeknek megfelelően megadták.
Következtetés
A Tailwind CSS segédprogram-osztályok gyűjteményét kínálja a lebegési effektusok alkalmazásához bármely elemre. Ha az egérmutatót a doboz dekorációs törőelemeire szeretné helyezni, használja a „ lebeg ” tulajdonságot, és adja meg a hatást a HTML programban. A felhasználók módosíthatják a háttérszínt, a szövegszínt és a szegélyszínt, vagy árnyékot adhatnak egy elemhez, amikor az egérmutatót ráhelyezik. Ez a cikk a Tailwindben a dobozdíszítéssel ellátott lebegés alkalmazásának eljárását ismerteti.