Ipapakita ng artikulong ito ang pamamaraan para sa paglalapat ng hover na may dekorasyong kahon sa Tailwind.
Paano Ilapat ang Hover sa Box Decoration Break sa Tailwind?
Tinutukoy ng CSS property na 'box-decoration-break' ang pag-render ng background, border, at padding para sa isang elemento kapag sumasaklaw ito sa maraming linya o column. Upang mailapat ang hover effect sa mga elemento ng break na dekorasyon ng kahon, kinakailangang gamitin ang ' hover ” ari-arian at ilapat ang anumang epekto sa mga elemento.
Tingnan ang mga hakbang na ibinigay sa ibaba para sa isang praktikal na pagpapakita:
Hakbang 1: Gamitin ang Hover Property sa Box Decoration Break sa HTML Program
Gumawa ng HTML program at gumamit ng anumang hover property sa mga elemento ng break na dekorasyon ng kahon. Halimbawa, nag-apply kami ng ' hover:box-decoration-clone ” property sa elementong “box decoration-slice” at isang “ hover:text-yellow-500 ” property sa elementong “box-decoration-clone”:
< katawan >
< span klase = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Pahiwatig
< / span >
< br >
< br >
< span klase = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Pahiwatig
< / span >
< / katawan >
dito:
- Ang ' hover:box-decoration-clone ' naglalapat ng 'box-decoration-clone' effect kapag ang elementong 'box decoration-slice' ay naka-hover sa ibabaw.
- Ang ' hover:text-yellow-500 ' binabago ang kulay ng text sa dilaw kapag ang elementong 'box-decoration-clone' ay naka-hover sa ibabaw.
Hakbang 2: I-verify ang Output
Patakbuhin ang HTML program upang i-verify ang output:
Ang output sa itaas ay nagpapakita na ang hover effect ay nailapat sa mga elemento ayon sa kung saan ito ay tinukoy.
Konklusyon
Nag-aalok ang Tailwind CSS ng koleksyon ng mga utility class para maglapat ng mga hover effect sa anumang elemento. Upang maglapat ng hover sa mga elemento ng break na dekorasyon ng kahon, gamitin ang “ hover ” property at tukuyin ang epekto sa HTML program. Maaaring baguhin ng mga user ang kulay ng background, kulay ng text, at kulay ng border, o magdagdag ng anino sa isang elementong naka-hover. Ipinaliwanag ng artikulong ito ang pamamaraan para sa paglalapat ng hover na may dekorasyong kahon sa Tailwind.