Bagaimana Cara Menerapkan 'break-inside' pada Hover di Tailwind?

Artikel ini akan mencontohkan metode untuk menerapkan 'break-inside' pada hover di Tailwind CSS.

Bagaimana Cara Menerapkan 'break-inside' pada Hover di Tailwind?

Untuk menerapkan 'break-inside' pada hover di Tailwind, gunakan properti 'hover' dengan utilitas 'break-inside' khusus pada elemen yang diinginkan dalam program HTML. Kemudian, lihat halaman web untuk verifikasi.

Untuk demonstrasi praktis, cobalah langkah-langkah yang tercantum di bawah ini:

Langkah 1: Gunakan Properti Hover Dengan Utilitas 'break-inside'.
Buat program HTML dan gunakan tombol “ melayang ” properti dengan utilitas 'break-inside' yang diinginkan. Misalnya, kami telah menggunakan properti hover dengan “ break-inside-hindari-kolom ” utilitas untuk menghindari jeda kolom dalam elemen

saat melayang:

Di Sini:

• “ kolom-2 ” digunakan untuk membagi
  menjadi dua kolom.
• “ bg-kuning-500 ” kelas menetapkan warna kuning ke latar belakang
  .
• “ hover: break-inside-avoid-column ” dalam elemen

  menunjukkan bahwa ketika penunjuk tetikus diarahkan, jeda kolom harus dihindari dalam elemen

  .

Langkah 2: Verifikasi Keluaran
Untuk memverifikasi apakah utilitas 'break-inside-avoid-column' telah berhasil diterapkan saat melayang, lihat halaman web HTML:

Output di atas menunjukkan bahwa ketika pengguna mengarahkan kursor ke elemen yang diinginkan, jeda kolom di dalam elemen telah dihindari. Ini menunjukkan bahwa kolom 'break-inside-avoid-column' telah berhasil diterapkan ke elemen yang di-hover sesuai dengan yang ditentukan.

Kesimpulan

Untuk menerapkan 'break-inside' saat melayang di Tailwind, gunakan tombol ' melayang ” properti dengan yang diinginkan “ pembobolan ” dalam program HTML. Properti hover dapat digunakan dengan elemen apa pun. Untuk verifikasi, lihat halaman web. Artikel ini telah menjelaskan metode untuk menerapkan 'break-inside' pada hover di Tailwind CSS.