Artikel ini akan menunjukkan kaedah untuk menggunakan kesan tuding pada grid lajur dalam CSS Tailwind.
Bagaimana untuk Memohon Tuding pada Grid Lajur dalam Tailwind?
Untuk menggunakan kesan tuding pada grid lajur dalam Tailwind, buat fail HTML dan gunakan ' berlegar 'kelas dengan ' grid-cols-
Ikuti langkah-langkah yang disediakan untuk pelaksanaan praktikal:
Langkah 1: Gunakan Hover Property Dengan Grid Lajur dalam Program HTML
Buat program HTML dan gunakan ' berlegar ” harta dengan “ grid-cols-
< badan >
< 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 >
< / badan >
Di sini, dalam elemen
- “ grid ” kelas digunakan untuk membuat susun atur grid.
- “ grid-cols-3 ” kelas menentukan bahawa grid harus mempunyai 3 lajur yang sama saiz.
- “ tuding:grid-cols-5 ” kelas menentukan bahawa grid harus ditukar kepada 5 lajur bersaiz sama apabila tetikus melayang di atasnya.
- “ jurang-3 kelas ” menetapkan jarak 3 unit antara setiap item grid.
- “ m-3 ” kelas menggunakan margin 3 unit di sekeliling bekas grid.
- “ pusat teks ” kelas menetapkan teks setiap item grid ke tengah.
Dalam elemen
- “ ” mewakili bilangan item grid.
- “ bg-teal-500 ” kelas menetapkan warna teal kepada latar belakang item grid.
- “ p-5 kelas ” menambah padding 5 unit pada kandungan di dalam item
kanak-kanak.Langkah 2: Sahkan Output
Untuk memastikan kesan tuding telah digunakan pada grid lajur, lihat halaman web dan gerakkan tetikus ke atas item grid:
Ia boleh dilihat bahawa apabila tetikus melayang di atas item grid, bilangan lajur berubah. Ia menunjukkan bahawa kesan tuding telah berjaya digunakan pada grid lajur.
Kesimpulan
Untuk menggunakan kesan tuding pada grid lajur dalam Tailwind, gunakan ' berlegar 'kelas dengan ' grid-cols-
” utiliti dalam program HTML. Ia menukar bilangan lajur pada tuding. Untuk memastikan perubahan, lihat halaman HTML web dan tuding tetikus pada item grid. Artikel ini telah menunjukkan kaedah untuk menggunakan kesan tuding pada grid lajur dalam CSS Tailwind.