Artikel ini akan memberi contoh kaedah untuk menggunakan kesan tuding pada utiliti aliran automatik grid dalam CSS Tailwind.
Bagaimana untuk Memohon Tuding pada Aliran Auto Grid dalam Tailwind?
Untuk menggunakan kesan tuding pada aliran auto grid dalam Tailwind, buat fail HTML dan gunakan ' berlegar 'kelas dengan ' grid-flow-
Lihat langkah-langkah yang disediakan untuk pelaksanaan praktikalnya:
Langkah 1: Gunakan Hover Property Dengan Row Grid dalam Program HTML
Buat program HTML dan gunakan ' berlegar 'harta dengan yang dikehendaki' grid-flow-
< badan >
< div kelas = 'grid grid-flow-col hover:grid-flow-row 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 >
< / badan >
di sini:
- “ grid ” kelas menetapkan elemen sebagai bekas grid.
- “ grid-flow-col ” mentakrifkan aliran item grid dalam lajur.
- “ hover:grid-flow-row ” kelas menukar aliran item grid kepada baris apabila tetikus melayang di atas bekas.
- “ jurang-3 ” menambah jurang 3 unit antara item grid.
- “ m-3 ” menambah jidar 3 unit di sekeliling bekas grid.
- “ pusat teks ” menjajarkan kandungan teks di dalam item grid ke tengah.
Langkah 2: Sahkan Output
Untuk mengesahkan bahawa kesan tuding telah digunakan pada aliran auto grid, lihat halaman web dan gerakkan tetikus ke atas item grid:
Dapat diperhatikan bahawa pada mulanya aliran item grid berada dalam lajur dan apabila tetikus melayang di atasnya, aliran ditukar kepada baris. Ini menunjukkan bahawa kesan hover berjaya digunakan pada aliran auto grid.
Kesimpulan
Untuk menggunakan kesan tuding pada aliran auto grid dalam Tailwind, gunakan “ berlegar 'kelas dengan yang dikehendaki' grid-flow-