Artikel ini akan menunjukkan prosedur untuk menggunakan tuding dengan hiasan kotak dalam Tailwind.
Bagaimana untuk Memohon Hover pada Pecah Hiasan Kotak dalam Tailwind?
Sifat CSS 'box-decoration-break' menentukan pemaparan latar belakang, jidar dan padding untuk elemen apabila ia merentas berbilang baris atau lajur. Untuk menggunakan kesan tuding pada elemen pecah hiasan kotak, ia dikehendaki menggunakan “ berlegar ” harta dan menggunakan sebarang kesan kepada unsur.
Lihat langkah-langkah yang disediakan di bawah untuk demonstrasi praktikal:
Langkah 1: Gunakan Hover Property pada Box Decoration Break dalam Program HTML
Buat program HTML dan gunakan sebarang sifat tuding pada elemen pemecah hiasan kotak. Sebagai contoh, kami telah menggunakan ' hover:kotak-hiasan-klon sifat ” pada elemen “hiasan kotak” dan “ hover:text-yellow-500 ” harta pada elemen “box-decoration-clone”:
< badan >
< rentang kelas = 'kotak-hiasan-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Petunjuk
< / rentang >
< br >
< br >
< rentang kelas = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Petunjuk
< / rentang >
< / badan >
di sini:
- ' hover:kotak-hiasan-klon ” menggunakan kesan “kotak-hiasan-klon” apabila elemen “hiasan kotak” dilayangkan di atas.
- ' hover:text-yellow-500 ” menukar warna teks kepada kuning apabila elemen “kotak-hiasan-klon” dituding di atas.
Langkah 2: Sahkan Output
Jalankan program HTML untuk mengesahkan output:
Output di atas menunjukkan bahawa kesan hover telah digunakan pada elemen mengikut mana ia ditentukan.
Kesimpulan
Tailwind CSS menawarkan koleksi kelas utiliti untuk menggunakan kesan tuding pada sebarang elemen. Untuk menggunakan tuding pada elemen pecah hiasan kotak, gunakan “ berlegar ” harta dan nyatakan kesan dalam program HTML. Pengguna boleh menukar warna latar belakang, warna teks dan warna jidar, atau menambah bayang pada elemen pada tuding. Artikel ini telah menerangkan prosedur untuk menggunakan hover dengan hiasan kotak dalam Tailwind.