Artikel ini akan mendemonstrasikan prosedur penerapan hover dengan dekorasi kotak di Tailwind.
Bagaimana Cara Mengaplikasikan Hover pada Box Decoration Break di Tailwind?
Properti CSS 'box-decoration-break' menentukan rendering latar belakang, batas, dan padding untuk suatu elemen saat elemen tersebut membentang di beberapa baris atau kolom. Untuk menerapkan efek hover pada elemen break dekorasi kotak, diperlukan untuk menggunakan “ melayang ” properti dan terapkan efek apa pun ke elemen.
Lihat langkah-langkah yang disediakan di bawah ini untuk demonstrasi praktis:
Langkah 1: Gunakan Hover Property pada Box Decoration Break di Program HTML
Buat program HTML dan gunakan properti hover apa pun pada elemen pemecah dekorasi kotak. Misalnya, kami telah menerapkan ' hover: klon-dekorasi-kotak ” pada elemen “kotak dekorasi-irisan” dan “ arahkan: teks-kuning-500 ” pada elemen “box-decoration-clone”:
< tubuh >
< menjangkau kelas = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 teks-putih teks-3xl px-2' >
Linux < br / >
Petunjuk
< / menjangkau >
< br >
< br >
< menjangkau kelas = 'box-decoration-clone hover:teks-kuning-500 bg-teal-600 teks-putih teks-3xl px-2' >
Linux < br / >
Petunjuk
< / menjangkau >
< / tubuh >
Di Sini:
- The “ hover: klon-dekorasi-kotak ” menerapkan efek 'klon dekorasi kotak' saat elemen 'potongan dekorasi kotak' diarahkan.
- The “ arahkan: teks-kuning-500 ” mengubah warna teks menjadi kuning ketika elemen 'kotak-dekorasi-klon' diarahkan.
Langkah 2: Verifikasi Keluaran
Jalankan program HTML untuk memverifikasi output:
Output di atas menunjukkan bahwa efek hover telah diterapkan ke elemen yang telah ditentukan.
Kesimpulan
Tailwind CSS menawarkan kumpulan kelas utilitas untuk menerapkan efek hover ke elemen apa pun. Untuk menerapkan hover pada elemen pemecah dekorasi kotak, gunakan tombol “ melayang ” dan tentukan efeknya dalam program HTML. Pengguna dapat mengubah warna latar belakang, warna teks, dan warna batas, atau menambahkan bayangan ke elemen saat melayang. Artikel ini telah menjelaskan prosedur penerapan hover dengan hiasan kotak di Tailwind.