Bagaimana untuk Melaksanakan Kesan Hover pada Skrin Sentuh Menggunakan CSS dan JavaScript?

Cara Mencontohi Interaksi Tuding pada Skrin Sentuh

Dalam bidang pembangunan web, mensimulasikan kesan tuding pada peranti yang didayakan sentuhan telah menjadi perkara yang berlarutan. cabaran. Tetapi jangan takut, kerana penyelesaian bijak wujud yang menggabungkan CSS dan JavaScript untuk menjadikannya mudah.

Bayangkan anda mempunyai elemen dengan beberapa teks dan gaya yang digunakan, termasuk kesan tuding yang menukar warna fon. Katakan anda ingin melanjutkan fungsi tuding ini untuk menyentuh acara pada peranti skrin sentuh. Begini caranya:

Langkah 1: Laraskan CSS

Daripada menggunakan pemilih ":hover" standard, kami akan mencipta kelas CSS baharu yang dipanggil "hover_effect ." Kelas ini akan bertanggungjawab untuk menggunakan gaya tuding.

<code class="css">element:hover, element.hover_effect {
    color: red;
}</code>

Langkah 2: Tambah Pendengar Acara Sentuhan menggunakan JavaScript

Seterusnya, kami akan menggunakan jQuery untuk mendengar untuk acara sentuhan pada elemen yang ingin kita jadikan boleh dilegar.

<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>

Skrip ini memastikan bahawa apabila sentuhan bermula atau berakhir pada elemen dengan kelas "legar", kelas "legar_kesan" ditogol, dengan berkesan mensimulasikan keadaan tuding.

Langkah 3: Cegah Gelagat Penyemak Imbas yang Tidak Diingini (Pilihan)

Untuk meningkatkan pengalaman pengguna, tambahkan coretan CSS ini untuk menghalang penyemak imbas daripada memaparkan menu atau gesaan yang berkaitan dengan menyalin atau memilih elemen:

<code class="css">.hover {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}</code>

Dan begitulah! Dengan mengubah suai CSS dan melaksanakan skrip JavaScript yang mudah, anda boleh mencetuskan kesan tuding pada skrin sentuh dengan lancar, memberikan pengguna anda pengalaman yang konsisten dan intuitif merentas semua peranti.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Kesan Hover pada Skrin Sentuh Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!