Bagaimanakah Saya Boleh Mensimulasikan Kesan Tuding pada Peranti Sentuh?

Mensimulasikan Kesan Tuding pada Peranti Sentuh

Dengan penggunaan meluas peranti yang didayakan sentuhan, mereplikasi interaksi tetikus klasik seperti kesan hover boleh satu cabaran. Isu ini timbul apabila cuba mencipta kesan tuding menggunakan CSS sahaja, kerana ia hanya terpakai pada input tetikus. Nasib baik, terdapat penyelesaian yang melibatkan menggabungkan JavaScript dan mengubah suai CSS.

Melaksanakan Simulasi

Untuk mensimulasikan kesan tuding pada sentuhan panjang, ikut langkah berikut:

1. Tambahkan kelas yang dipanggil "legar" pada elemen HTML yang anda mahu kesan tuding berlaku.
2. Tambah kod JavaScript berikut untuk mendayakan pengendalian sentuhan:

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

3. Dalam CSS, ubah suai definisi kesan hover untuk memasukkan kelas ".hover_effect" :

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

4. Secara pilihan, tambahkan CSS berikut untuk melumpuhkan pemilihan penyemak imbas pada sentuh:

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

Penjelasan

Penyelesaian ini mengambil kesempatan daripada peristiwa 'mula sentuh' dan 'sentuh' yang dicetuskan pada peranti yang didayakan sentuhan. Apabila jari pengguna menyentuh skrin, acara 'touchstart' mencetus dan menambah kelas 'hover_effect' pada elemen HTML dengan kelas "hover". Apabila sentuhan tamat, acara 'touchend' dicetuskan, mengalih keluar kelas 'hover_effect', dengan berkesan mensimulasikan kesan hover.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mensimulasikan Kesan Tuding pada Peranti Sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!