Tämä artikkeli esittelee hoverin levittämisen laatikkokoristeella Tailwindissä.
Kuinka käyttää Hover on Box Decoration Break tailwindissä?
CSS-ominaisuus 'box-decoration-break' määrittää elementin taustan, reunuksen ja täytön renderöinnin, kun se kattaa useita rivejä tai sarakkeita. Hover-tehosteen käyttämiseksi laatikon koristeluelementeissä on käytettävä ' leijuu ”-ominaisuutta ja soveltaa elementteihin mitä tahansa tehostetta.
Katso alla olevat vaiheet käytännön esittelyyn:
Vaihe 1: Käytä Hover Property -ominaisuutta Box Decoration Breakissa HTML-ohjelmassa
Luo HTML-ohjelma ja hyödynnä mitä tahansa hover-ominaisuutta laatikon koristeluelementeissä. Olemme esimerkiksi soveltaneet ' hover:box-decoration-clone '-ominaisuus 'box decoration-slice' -elementissä ja ' hover:text-yellow-500 '-ominaisuus 'box-decoration-clone' -elementissä:
< kehon >
< jänneväli luokkaa = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Vihje
< / jänneväli >
< br >
< br >
< jänneväli luokkaa = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Vihje
< / jänneväli >
< / kehon >
Tässä:
- ' hover:box-decoration-clone ' käyttää 'box-decoration-clone' -tehostetta, kun 'box decoration-slice' -elementti vie hiiri päälle.
- ' hover:text-yellow-500 ' muuttaa tekstin värin keltaiseksi, kun 'box-decoration-clone' -elementti siirretään päälle.
Vaihe 2: Tarkista lähtö
Suorita HTML-ohjelma tarkistaaksesi tulos:
Yllä oleva tulos osoittaa, että hover-tehoste on käytetty elementeissä, joiden mukaan se määritettiin.
Johtopäätös
Tailwind CSS tarjoaa kokoelman hyödyllisyysluokkia hover-tehosteiden soveltamiseksi mihin tahansa elementtiin. Voit käyttää osoittimen laatikon koristeluelementtien päälle käyttämällä ' leijuu ”-ominaisuutta ja määritä tehoste HTML-ohjelmassa. Käyttäjät voivat muuttaa taustaväriä, tekstin väriä ja reunuksen väriä tai lisätä varjon elementtiin hiiren osoitin. Tässä artikkelissa on selitetty menettely, jolla leijuu laatikkokoristeella Tailwindissä.