Artikel ini akan mendemonstrasikan metode untuk menerapkan efek hover pada kisi kolom di Tailwind CSS.
Bagaimana Cara Menerapkan Arahkan pada Kotak Kolom di Tailwind?
Untuk menerapkan efek hover pada kisi kolom di Tailwind, buat file HTML dan gunakan tombol “ melayang ” kelas dengan “ grid-cols-
Ikuti langkah-langkah yang disediakan untuk implementasi praktis:
Langkah 1: Gunakan Properti Hover Dengan Kotak Kolom di Program HTML
Buat program HTML dan gunakan “ melayang ” properti dengan “ grid-cols-
< tubuh >
< div kelas = 'grid grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center' >
< div kelas = 'bg-teal-500 p-5' > 1 < / div >
< div kelas = 'bg-teal-500 p-5' > 2 < / div >
< div kelas = 'bg-teal-500 p-5' > 3 < / div >
< div kelas = 'bg-teal-500 p-5' > 4 < / div >
< div kelas = 'bg-teal-500 p-5' > 5 < / div >
< div kelas = 'bg-teal-500 p-5' > 6 < / div >
< div kelas = 'bg-teal-500 p-5' > 7 < / div >
< div kelas = 'bg-teal-500 p-5' > 8 < / div >
< div kelas = 'bg-teal-500 p-5' > 9 < / div >
< div kelas = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / tubuh >
Di sini, di elemen
- “ kisi ” class digunakan untuk membuat tata letak grid.
- “ grid-cols-3 ” kelas menentukan bahwa kisi harus memiliki 3 kolom berukuran sama.
- “ arahkan: grid-cols-5 ” class menentukan bahwa grid harus diubah menjadi 5 kolom berukuran sama ketika mouse diarahkan ke atasnya.
- “ celah-3 ” kelas mengatur jarak 3 unit antara setiap item grid.
- “ m-3 ” kelas menerapkan margin 3 unit di sekitar wadah kisi.
- “ pusat teks ” kelas menyetel teks dari setiap item kisi ke tengah.
Dalam elemen
- “ ” mewakili jumlah item kisi.
- “ bg-teal-500 ” kelas menyetel warna hijau ke latar belakang item kisi.
- “ hal-5 ” class menambahkan padding 5 unit ke konten di dalam item
anak.Langkah 2: Verifikasi Keluaran
Untuk memastikan efek hover telah diterapkan pada kisi kolom, lihat halaman web, dan gerakkan mouse ke atas item kisi:
Dapat dilihat bahwa saat mouse diarahkan ke item kisi, jumlah kolom berubah. Ini menunjukkan bahwa efek hover telah berhasil diterapkan pada kisi kolom.
Kesimpulan
Untuk menerapkan efek hover pada kisi kolom di Tailwind, gunakan tombol “ melayang ” kelas dengan “ grid-cols-
” dalam program HTML. Itu mengubah jumlah kolom pada hover. Untuk memastikan perubahan, lihat halaman web HTML dan arahkan mouse pada item grid. Artikel ini telah mendemonstrasikan metode untuk menerapkan efek hover pada kisi kolom di Tailwind CSS.