Artikel ini membahas prosedur implementasi untuk menerapkan hover dan status lainnya dengan properti visibilitas menggunakan Tailwind CSS.
Bagaimana Cara Mendaftar Hover dan Status Lain Dengan Utilitas Visibilitas di Tailwind?
Utilitas visibilitas dapat digunakan di sepanjang hover dan status lainnya untuk membuat perubahan visibilitas pada interaksi pengguna. Ada tiga kelas di bawah utilitas visibilitas yaitu “ bisa dilihat ”, “ tak terlihat ', Dan ' runtuh ”. Mari integrasikan beberapa kelas visibilitas dengan status hover dalam contoh di bawah ini untuk pemahaman yang lebih baik.
Contoh 1: Menerapkan Status Hover Sepanjang Kelas 'tak terlihat'.
Dalam hal ini, elemen yang dipilih akan disembunyikan saat kursor pengguna mengarahkan kursor ke elemen tersebut, kodenya ditampilkan di bawah ini:
< tubuh >
< div kelas = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div kelas = 'pusat teks bulat bg-biru-500 p-3' > 01 < / div >
< div kelas = 'bg-blue-500 p-3 hover: pusat teks bulat tak terlihat' > 02 < / div >
< div kelas = 'pusat teks bulat bg-biru-500 p-3' > 03 < / div >
< / div >
< / tubuh >
Penjelasan dari kode di atas:
- Pertama, div induk dibuat yang membuat tata letak kisi tiga kolom yang memiliki spasi di antara setiap kolom dan margin ' 4px ”. Menggunakan Tailwind CSS “ kisi ”, “ grid-cols-3 ”, “ celah ”, “ -ku ', Dan ' mx ” kelas masing-masing.
- Selanjutnya, tiga anak “ div ” elemen dibuat dan gaya dasar diterapkan padanya.
- Kemudian, “ melayang ” status atau pemilih dalam CSS ditugaskan ke “div” kedua dan “ tak terlihat ' ditugaskan untuk itu dipisahkan oleh titik dua ' : ' tanda. Ini membuat div kedua tidak terlihat saat mouse diarahkan ke atasnya.
Pratinjau halaman web setelah fase eksekusi:
Gif di atas menunjukkan div kedua menjadi tidak terlihat pada mouse hover.
Contoh 2: Menerapkan Status Aktif Sepanjang Kelas 'tidak terlihat'.
Status 'aktif' menerapkan gaya saat pengguna memilih elemen tertentu dan tidak keluar. Sama seperti kotak teks ketika pengguna mulai memasukkan data ke dalam bidang, saat ini bidang aktif. Untuk mendapatkan pemahaman yang lebih jelas tentang status aktif dan cara kerjanya dengan kelas 'tidak terlihat', kunjungi kode di bawah ini:
< tubuh >< div kelas = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div kelas = 'pusat teks bulat bg-biru-500 p-3' >01< / div >
< div kelas = 'bg-blue-500 p-3 aktif: pusat teks bulat tak terlihat' >02< / div >
< div kelas = 'pusat teks bulat bg-biru-500 p-3' >03< / div >
< / div >
< / tubuh >
Pada kode di atas, kelas “ tak terlihat ” ditugaskan ke “ aktif ' status untuk yang kedua ' div ” untuk membuat elemen div kedua disembunyikan saat dipilih.
Setelah eksekusi, pratinjau halaman web muncul seperti ini:
Output di atas menunjukkan bahwa ketika 'div' kedua dipilih, elemen menjadi tidak terlihat.
Kesimpulan
Arahkan kursor dan status lain seperti aktif atau fokus dapat digunakan dengan kelas yang disediakan oleh utilitas visibilitas untuk mengubah properti visibilitas untuk elemen yang dipilih. Untuk mengubah visibilitas elemen pada mouse hover, kelas hover digunakan di sepanjang kelas visibilitas yang dipisahkan oleh warna seperti ' arahkan: terlihat ' atau ' melayang: tak terlihat ”. Blog ini telah menjelaskan prosedur untuk menerapkan status hover dengan utilitas visibilitas.