Artikel ini akan mencontohkan metode untuk menerapkan efek hover pada utilitas grid auto flow di Tailwind CSS.
Bagaimana Cara Mendaftar Arahkan pada Grid Auto Flow di Tailwind?
Untuk menerapkan efek hover pada grid auto flow di Tailwind, buat file HTML dan gunakan tombol “ melayang ” kelas dengan “ grid-flow-
Lihatlah langkah-langkah yang diberikan untuk implementasi praktisnya:
Langkah 1: Gunakan Properti Hover Dengan Kotak Baris di Program HTML
Buat program HTML dan gunakan “ melayang ” properti dengan yang diinginkan “ grid-flow-
< tubuh >
< 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 >
< / tubuh >
Di Sini:
- “ kisi ” kelas menetapkan elemen sebagai wadah kisi.
- “ grid-flow-col ” mendefinisikan aliran item kisi dalam kolom.
- “ hover: grid-aliran-baris ” class mengubah aliran item kisi menjadi baris saat mouse diarahkan ke wadah.
- “ celah-3 ” menambahkan jarak 3 unit di antara item kisi.
- “ m-3 ” menambahkan margin 3 unit di sekitar wadah kisi.
- “ pusat teks ” menyelaraskan konten teks di dalam item kisi ke tengah.
Langkah 2: Verifikasi Keluaran
Untuk memverifikasi bahwa efek hover telah diterapkan pada alur otomatis grid, lihat halaman web, dan gerakkan mouse ke atas item grid:
Dapat diamati bahwa awalnya aliran item kisi ada di kolom dan saat mouse mengarahkan kursor ke atasnya, aliran diubah menjadi baris. Hal ini menandakan bahwa efek hover berhasil diterapkan pada aliran grid auto.
Kesimpulan
Untuk menerapkan efek hover pada grid auto flow di Tailwind, gunakan tombol “ melayang ” kelas dengan yang diinginkan “ grid-flow-