Bagaimana untuk Menghapuskan Kesan Hover Melekit pada Butang untuk Peranti Didayakan Sentuhan?

Cara Menghapuskan Kesan Tuding Melekit pada Butang untuk Peranti Didayakan Sentuhan

Apabila mencipta karusel dengan butang navigasi kekal, isu biasa timbul pada peranti sentuh. Keadaan tuding butang, biasanya kelihatan biru, menjadi "melekit", kekal diaktifkan walaupun selepas diketik. Beberapa pendekatan untuk menangani masalah ini telah diterokai:

• Menambah kelas tanpa tuding pada sentuhan boleh menyelesaikan isu, tetapi ia mungkin memberi kesan kepada prestasi dan memperkenalkan isu keserasian pada peranti seperti Chromebook dengan kedua-dua sentuhan dan tetikus keupayaan.
• Melaksanakan kelas sentuh pada documentElement dan mengubah suai CSS dengan sewajarnya juga boleh menangani masalah, tetapi ia tidak optimum untuk peranti dengan kedua-duanya sokongan sentuh dan tetikus.

Penyelesaian yang ideal ialah mengalih keluar keadaan tuding semasa sentuhan. Walau bagaimanapun, tiada kaedah langsung tersedia untuk ini. Memfokus pada elemen lain tidak mengalih keluar keadaan tuding. Semasa mengetik pada elemen lain secara manual melakukannya, mencetuskan tindakan ini secara pengaturcaraan dalam JavaScript tetap menjadi cabaran.

Untuk menyelesaikan isu ini dengan berkesan, anda boleh memanfaatkan perkembangan terkini dalam Pertanyaan Media CSS Tahap 4:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

CSS ini pada asasnya menyatakan, "Jika peranti menyokong tuding sebenar (cth., mempunyai peranti input utama seperti tetikus), gunakan hover butang style."

Untuk penyemak imbas yang ciri ini belum lagi dilaksanakan, polyfill JavaScript boleh digunakan untuk mengesan sokongan tuding dan togol kelas tersuai, membolehkan anda menggunakan gaya tuding secara bersyarat:

html.my-true-hover button:hover {
    background-color: blue;
}

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

Penyelesaian ini berkesan menghapuskan kesan lekukan melekit untuk peranti sentuh sambil mengekalkan estetika yang diingini pada peranti dengan input tetikus.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Kesan Hover Melekit pada Butang untuk Peranti Didayakan Sentuhan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!