Bagaimana untuk Mensimulasikan Kesan Hover pada Skrin Sentuh Menggunakan Tekan Lama?

Mencetuskan Kesan Tuding pada Peranti Didayakan Sentuhan Menggunakan Tekan Lama

Untuk meniru kesan tuding pada peranti yang didayakan sentuhan, seperti telefon pintar dan tablet , anda boleh memanfaatkan gabungan CSS dan JavaScript. Begini caranya:

Penanda HTML

Tambahkan kelas bernama "legar" pada mana-mana elemen yang anda mahu gunakan kesan tuding. Contohnya:

<code class="html"><p class="hover">Some Text</p></code>

Penggayaan CSS

Ubah suai CSS anda untuk memasukkan kesan hover untuk kedua-dua kelas :hover dan .hover_effect. Kelas .hover_effect akan digunakan untuk mensimulasikan kesan hover pada peranti sentuh:

<code class="css">p {
  color: black;
}

p:hover, p.hover_effect {
  color: red;
}</code>

JavaScript

Gunakan JavaScript untuk mengesan acara akhbar lama. Berikut ialah contoh menggunakan jQuery:

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

Kod JavaScript ini menambah pengendali acara untuk acara mula sentuh dan akhir sentuh pada elemen dengan kelas "legar". Apabila sentuhan bermula atau tamat, ia menogol kelas hover_effect pada elemen yang disentuh.

CSS Tambahan

Untuk menghalang penyemak imbas daripada memaparkan menu konteks atau meminta pengesahan apabila menyentuh elemen pada peranti mudah alih, tambahkan peraturan CSS berikut:

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

Hasil

Dengan menggabungkan elemen ini, anda kini boleh mensimulasikan kesan tuding pada sentuhan didayakan peranti dengan menekan lama pada elemen yang dikehendaki. Kaedah ini boleh digunakan untuk mencipta elemen interaktif, seperti butang atau pautan, tanpa memerlukan tuding tetikus tradisional.

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