Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencegah Penggayaan CSS :hover daripada Memecahkan Pengalaman Skrin Sentuh Anda?
Cara Mengabaikan :tuding Penggayaan CSS pada Peranti Skrin Sentuh
Cabaran: Mengatasi Isu Paparan Tuding pada Peranti Sentuh
Sifat CSS :hover menambah penggayaan interaktif pada elemen apabila dilegarkan dengan tetikus. Walau bagaimanapun, ini menimbulkan masalah pada peranti berasaskan sentuhan, di mana tiada tanggapan untuk melayang. Ini boleh mengakibatkan tingkah laku yang tidak dijangka atau gangguan visual apabila pengguna berinteraksi dengan elemen pada skrin sentuh.
Penyelesaian:
1. Pembuangan JavaScript bagi Gaya :hover
Menggunakan JavaScript, semua peraturan CSS yang mengandungi :hover boleh dialih keluar, dengan berkesan melumpuhkan sifat ini pada peranti sentuh. Walau bagaimanapun, kaedah ini mempunyai kelemahan:
2. Pertanyaan Media CSS Sahaja
Melampirkan peraturan :tuding dalam blok @media boleh melumpuhkan kesan tuding pada peranti sentuh. Walau bagaimanapun, pendekatan ini:
3. Pengesanan JavaScript dan Prepending CSS
Dengan mengesan input sentuhan melalui JavaScript, kelas khas (mis., hasHover) boleh ditambahkan pada badan dokumen. Semua peraturan :hover kemudiannya boleh ditambah dengan kelas ini untuk melumpuhkan kesan tuding pada peranti sentuh. Walaupun kaedah ini berfungsi dengan baik, ia masih menghadapi cabaran pada peranti input bercampur.
4. Pengesanan Tuding Dinamik dan Togol Kelas
Kaedah ini menggabungkan pengendalian acara JavaScript dan manipulasi kelas untuk menogol kesan tuding secara dinamik. Ia membolehkan kesan tuding apabila kursor tetikus dikesan dan melumpuhkannya apabila peristiwa sentuhan berlaku. Pendekatan ini menyediakan penyelesaian yang paling mantap, berfungsi merentas pelbagai pelayar dan peranti input.
Atas ialah kandungan terperinci Bagaimana untuk Mencegah Penggayaan CSS :hover daripada Memecahkan Pengalaman Skrin Sentuh Anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!