Artikel ini akan menunjukkan kaedah untuk menggunakan kesan tuding pada grid baris dalam CSS Tailwind.
Bagaimana untuk Memohon Tuding pada Row Grid dalam Tailwind?
Untuk menggunakan kesan tuding pada grid baris dalam Tailwind, buat fail HTML dan gunakan ' berlegar 'kelas dengan ' grid-rows-
Semak langkah-langkah yang disediakan untuk pelaksanaan praktikal:
Langkah 1: Gunakan Hover Property Dengan Row Grid dalam Program HTML
Buat program HTML dan gunakan ' berlegar ” harta dengan “ grid-rows-
< badan >
< 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 >
< / badan >
Di sini, dalam elemen
- “ grid ” kelas digunakan untuk membuat susun atur grid.
- “ grid-rows-3 ” kelas menentukan bahawa grid harus mempunyai 3 baris bersaiz sama.
- “ hover:grid-rows-5 ” kelas menukar grid kepada 5 baris bersaiz sama apabila tetikus melayang di atasnya.
- “ grid-flow-col ” kelas meletakkan item grid secara mendatar dalam lajur.
- “ 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 mengesahkan bahawa kesan tuding telah digunakan pada grid baris, lihat halaman web dan gerakkan tetikus ke atas item grid:
Dapat diperhatikan bahawa pada mulanya terdapat 3 baris dan apabila tetikus melayang di atasnya, bilangan baris telah berubah kepada 5. Ini menunjukkan bahawa kesan hover telah berjaya digunakan pada grid baris.
Kesimpulan
Untuk menggunakan kesan tuding pada grid baris dalam Tailwind, gunakan ' berlegar 'kelas dengan ' grid-rows-
” utiliti dalam program HTML. Ia menukar bilangan baris pada tuding. Untuk memastikan perubahan, lihat halaman HTML web dan tuding tetikus pada item grid. Artikel ini telah menggambarkan kaedah untuk menggunakan kesan tuding pada grid baris dalam CSS Tailwind.