Bagaimana untuk Mensimulasikan Kesan Tuding pada Peranti Didayakan Sentuhan?

Mensimulasikan Kesan Tuding pada Peranti Didayakan Sentuhan

Peranti yang didayakan sentuhan tidak mempunyai kefungsian tuding tradisional tetikus. Ini menimbulkan cabaran apabila cuba meniru kesan tuding menggunakan CSS sahaja.

Untuk menangani isu ini, penyelesaian bijak melibatkan pengubahsuaian CSS dan menggabungkan beberapa JavaScript. Menggunakan jQuery, coretan berikut menogol kelas pada peristiwa mula dan tamat sentuhan, mensimulasikan keadaan tuding secara berkesan:

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

Dalam HTML, cuma tambahkan kelas "legar" pada elemen yang ingin anda tuding.

Untuk meniru kesan peraturan tuding CSS, ubah suai CSS anda untuk menggunakan sintaks berikut:

element:hover, element.hover_effect {
    rule:properties;
}

Selain itu, tambahkan CSS berikut untuk mengelakkan penyemak imbas daripada mengganggu kesan tuding:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

Dengan pengubahsuaian ini, peranti yang didayakan sentuhan kini akan mensimulasikan kesan tuding, memberikan pengalaman pengguna yang lebih intuitif.

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