Artikel ini akan mendemonstrasikan metode untuk menerapkan efek hover pada grid baris di Tailwind CSS.
Bagaimana Cara Mendaftar Hover di Row Grid di Tailwind?
Untuk menerapkan efek hover pada petak baris di Tailwind, buat file HTML dan gunakan tombol “ melayang ” kelas dengan “ kisi-baris-
Lihat langkah-langkah yang diberikan untuk implementasi praktis:
Langkah 1: Gunakan Properti Hover Dengan Kotak Baris di Program HTML
Buat program HTML dan gunakan “ melayang ” properti dengan “ kisi-baris-
< tubuh >
< div kelas = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col 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 ” Kelas digunakan untuk membuat tata letak kisi.
- “ kisi-baris-3 ” kelas menentukan bahwa kisi harus memiliki 3 baris berukuran sama.
- “ arahkan: grid-baris-5 ” class mengubah kisi menjadi 5 baris berukuran sama saat mouse diarahkan ke atasnya.
- “ grid-flow-col ” kelas menempatkan item kisi secara horizontal dalam kolom.
- “ 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 memverifikasi bahwa efek hover telah diterapkan pada kisi baris, lihat halaman web, dan gerakkan mouse di atas item kisi:
Dapat diamati bahwa awalnya ada 3 baris dan ketika mouse mengarahkan kursor ke atasnya, jumlah baris berubah menjadi 5. Ini menunjukkan bahwa efek hover telah berhasil diterapkan pada kisi baris.
Kesimpulan
Untuk menerapkan efek hover pada petak baris di Tailwind, gunakan tombol “ melayang ” kelas dengan “ kisi-baris-
” dalam program HTML. Itu mengubah jumlah baris pada hover. Untuk memastikan perubahan, lihat halaman web HTML dan arahkan mouse pada item grid. Artikel ini telah mengilustrasikan metode untuk menerapkan efek hover pada grid baris di Tailwind CSS.