Bagaimana untuk Meniru Kesan Tuding untuk Sentuhan Panjang dalam Penyemak Imbas Didayakan Sentuhan?

Simulasi Kesan Tuding dengan Gerak Isyarat Sentuhan

Senario:

Anda mempunyai halaman web dengan elemen HTML yang digayakan menggunakan CSS. Khususnya, anda mempunyai elemen dengan kesan "legar", di mana warnanya berubah apabila kursor melayang di atasnya. Walau bagaimanapun, dalam penyemak imbas yang didayakan sentuhan, anda ingin meniru gelagat ini untuk sentuhan yang lama.

Penyelesaian:

Untuk mencapai ini, ikut langkah berikut:

1. Ubah suai CSS: Tambahkan kelas berikut pada elemen HTML anda yang anda ingin dayakan kesan hover:

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

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

Ini memastikan bahawa "hover_effect " kelas mereplikasi penggayaan kelas pseudo ":hover".

2. Tambah JavaScript: Laksanakan kod berikut menggunakan jQuery:

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

3. Halang Gelagat Penyemak Imbas Lalai: Untuk menghalang tindakan sentuhan lalai penyemak imbas (cth., menu konteks), tambahkan CSS berikut pada helaian gaya anda:

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

Gabungan pengubahsuaian ini membolehkan gerak isyarat sentuh dan tahan pada elemen yang layak untuk mensimulasikan acara tuding untuk penyemak imbas yang didayakan sentuhan.

Atas ialah kandungan terperinci Bagaimana untuk Meniru Kesan Tuding untuk Sentuhan Panjang dalam Penyemak Imbas Didayakan Sentuhan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!