Bagaimanakah Saya Boleh Meniru Kesan Tuding pada Peranti Sentuh?

Menerap Gelagat Tuding pada Peranti Sentuh

Simulasi kesan tuding pada peranti yang didayakan sentuhan boleh meningkatkan pengalaman pengguna, meniru interaksi serupa pada penyemak imbas desktop . Begini cara untuk mencapainya:

Sertai peraturan CSS untuk :hover dengan kelas CSS tersuai untuk acara sentuhan:

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

Dalam HTML anda, tetapkan kelas "legar" kepada elemen yang anda mahu mencetuskan kesan tuding pada.

Untuk mensimulasikan gelagat tuding pada acara sentuh, tambah kod JavaScript berikut menggunakan jQuery:

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

Apabila pengguna menyentuh elemen dengan kelas "legar", pendengar acara menogol kelas "hover_effect", yang sepatutnya meniru peraturan CSS :hover.

Kepada menghalang tindakan lalai penyemak imbas (cth., menyimpan atau memilih), tambah CSS berikut peraturan:

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

Tambahan ini memastikan bahawa apabila pengguna menyentuh elemen, penyemak imbas tidak memaparkan menu konteks atau bertanya sama ada mereka ingin menyimpan atau menyalin imej.

Oleh menggabungkan CSS dan JavaScript, anda boleh mencipta pengalaman seperti hover dengan berkesan untuk peranti yang didayakan sentuhan, membolehkan pengguna berinteraksi dengan kandungan web anda dengan lebih mudah.

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