Artikel ini membincangkan prosedur pelaksanaan untuk menggunakan tuding dan keadaan lain dengan sifat keterlihatan menggunakan Tailwind CSS.
Bagaimana untuk Memohon Hover dan Negeri Lain Dengan Utiliti Keterlihatan dalam Tailwind?
Utiliti keterlihatan boleh digunakan di sepanjang tuding dan keadaan lain untuk membuat perubahan keterlihatan pada interaksi pengguna. Terdapat tiga kelas di bawah utiliti penglihatan iaitu “ nampak ”, “ tidak kelihatan ”, dan “ runtuh ”. Mari kita integrasikan beberapa kelas keterlihatan dengan keadaan tuding dalam contoh di bawah untuk pemahaman yang lebih baik.
Contoh 1: Menerapkan Keadaan Hover Sepanjang Kelas 'tidak kelihatan'.
Dalam kes ini, elemen yang dipilih akan disembunyikan apabila kursor pengguna melayang di atas elemen, kod ditunjukkan di bawah:
< badan >
< 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 tuding: pusat teks bulat tidak kelihatan' > 02 < / div >
< div kelas = 'pusat teks bulat bg-biru-500 p-3' > 03 < / div >
< / div >
< / badan >
Penjelasan kod di atas:
- Pertama, div induk dicipta yang mencipta susun atur grid tiga lajur yang mempunyai ruang antara setiap lajur dan margin ' 4px ”. Menggunakan CSS Tailwind “ grid ”, “ grid-cols-3 ”, “ jurang ”, “ saya ”, dan “ mx ” kelas masing-masing.
- Seterusnya, tiga anak ' div ” elemen dicipta dan penggayaan asas diterapkan padanya.
- Kemudian, ' berlegar negeri atau pemilih dalam CSS diperuntukkan kepada 'div' kedua dan ' tidak kelihatan 'ditugaskan kepadanya dipisahkan oleh kolon' : ” tanda. Ini menjadikan div kedua tidak kelihatan apabila tetikus melayang di atasnya.
Pratonton halaman web selepas fasa pelaksanaan:
Gif di atas menunjukkan div kedua menjadi tidak kelihatan pada tuding tetikus.
Contoh 2: Menerapkan Keadaan Aktif Sepanjang Kelas 'tidak kelihatan'.
Keadaan 'aktif' menggunakan gaya apabila pengguna memilih elemen tertentu dan tidak meninggalkannya. Sama seperti kotak teks apabila pengguna mula memasukkan data di dalam medan, pada masa ini medan itu aktif. Untuk mendapatkan pemahaman yang lebih jelas tentang keadaan aktif dan cara ia berfungsi dengan kelas 'halimunan', lawati kod di bawah:
< badan >< 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 tidak kelihatan' >02< / div >
< div kelas = 'pusat teks bulat bg-biru-500 p-3' >03< / div >
< / div >
< / badan >
Dalam kod di atas, kelas ' tidak kelihatan 'ditugaskan kepada' aktif 'nyatakan untuk yang kedua' div ” elemen untuk menjadikan elemen div kedua disembunyikan apabila ia dipilih.
Selepas pelaksanaan, pratonton halaman web kelihatan seperti ini:
Output di atas menunjukkan bahawa apabila 'div' kedua dipilih elemen menjadi tidak kelihatan.
Kesimpulan
Tuding dan keadaan lain seperti aktif atau fokus boleh digunakan dengan kelas yang disediakan oleh utiliti keterlihatan untuk mengubah suai sifat keterlihatan bagi elemen yang dipilih. Untuk menukar keterlihatan elemen pada tuding tetikus, kelas tuding digunakan di sepanjang kelas keterlihatan yang dipisahkan oleh warna seperti “ hover:terlihat ” atau “ hover:tidak kelihatan ”. Blog ini telah menerangkan prosedur untuk menggunakan keadaan tuding dengan utiliti keterlihatan.