Bagaimanakah Saya Boleh Menghapuskan CSS :hover yang Tidak Diingini pada Peranti Didayakan Sentuhan?

Menghapuskan :hover CSS pada Peranti Didayakan Sentuhan

Apabila pengguna mengakses tapak web melalui peranti sentuh, :hover CSS pengisytiharan boleh menjadi tidak diingini, kerana mereka tidak bertindak balas dengan berkesan kepada input sentuhan. Pengguna mungkin mengalami kesan hover berlarutan yang boleh mengganggu. Untuk menangani isu ini, beberapa kaedah tersedia untuk mengalih keluar atau mengabaikan gaya :tuding pada peranti sentuh.

Penyingkiran JavaScript

Satu pendekatan melibatkan penggunaan JavaScript untuk menghapuskan semua peraturan CSS mengandungi : hover. Kaedah ini serasi dengan pelayar lama dan tidak memerlukan pengubahsuaian CSS. Dengan menyemak sama ada peranti menyokong input sentuhan dan mengulangi peraturan gaya, JavaScript boleh mengalih keluar semua perisytiharan :hover.

Pertanyaan Media CSS Sahaja

Pilihan lain menggunakan @ pertanyaan media untuk menyekat penggunaan peraturan :hover hanya apabila peranti menyokong hover. Walau bagaimanapun, kaedah ini terhad kepada iOS 9.0 dan Chrome untuk Android atau Android 5.0 untuk WebViews. Selain itu, ia boleh memecahkan kesan lekukan pada tetikus dan peranti sentuh bercampur.

Pengesanan JS dan Pengawalan CSS

Penyelesaian yang mantap melibatkan pengesanan input sentuhan menggunakan JavaScript dan pendahuluan semua : peraturan tuding dengan kelas badan tersuai (cth., .hasHover). Dengan menggunakan kelas ini secara bersyarat, kesan tuding didayakan hanya pada peranti dengan sokongan tetikus.

Pendekatan Gabungan Gerakan Tetikus dan Pengesanan Sentuhan

Kaedah paling komprehensif menggabungkan gerakan tetikus pengesanan dan pengesanan sentuhan. Kesan hover didayakan apabila pergerakan tetikus dikesan dan dilumpuhkan apabila input sentuhan dikenali. Pendekatan ini memberikan pengalaman yang lancar pada kedua-dua peranti berdaya sentuh dan tetikus.

Pelaksanaan Praktikal

Pelaksanaan praktikal melibatkan pendengar acara JavaScript dan manipulasi kelas badan. Kelas hasHover ditambah atau dialih keluar secara dinamik berdasarkan input sentuhan dan peristiwa pergerakan tetikus.

Untuk penyemak imbas moden, contoh langsung boleh didapati di https://jsfiddle.net/57tmy8j3/. Versi lama yang serasi dengan penyemak imbas lama tersedia di https://jsfiddle.net/dkz17jc5/19/.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghapuskan CSS :hover yang Tidak Diingini pada Peranti Didayakan Sentuhan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!