Cara Melumpuhkan Gaya :hover dengan Berkesan pada Peranti Sentuh: Panduan Komprehensif

Cara Melumpuhkan Gaya :hover pada Peranti Sentuh: Panduan Komprehensif

Masalah:
Apabila peranti sentuh melawati tapak web, : tuding gaya CSS pencetus pada klik atau ketik. Ini boleh mengganggu perhatian atau malah menyebabkan elemen interaktif tidak boleh diakses.

Objektif:
Alih keluar atau abaikan semua :tuding perisytiharan CSS untuk peranti sentuh tanpa mengetahui setiap pemilih perisytiharan.

Penyelesaian:

Alih Keluar JavaScript

Alih keluar semua peraturan CSS yang mengandungi :hover menggunakan JavaScript.

<code class="javascript">if (hasTouch()) {
  for (var si in document.styleSheets) {
    for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
      if (styleSheet.rules[ri].selectorText.match(':hover')) {
        styleSheet.deleteRule(ri);
      }
    }
  }
}</code>

Kebaikan:

• Serasi dengan penyemak imbas lama dan tidak memerlukan perubahan CSS.
  Keburukan:
• Melumpuhkan tuding pada tetikus dan peranti sentuh bercampur, membahayakan UX.
• Hanya boleh mengalih keluar lembaran gaya yang dihoskan pada domain yang sama.

CSS sahaja dengan Pertanyaan Media

Gunakan sekatan @media untuk mengandungi peraturan :tuding.

<code class="css">@media (hover: hover) {
  a:hover { color: blue; }
}</code>

Kebaikan:

• Mudah untuk dilaksanakan dalam CSS.
  Keburukan:
• Memerlukan sokongan untuk media tuding pertanyaan (iOS 9.0 , Chrome untuk Android, Android 5.0 ).
• Tidak konsisten untuk tetikus bercampur dan peranti sentuh.

Pengesanan Sentuhan dan Suntikan CSS

Kesan peristiwa sentuhan menggunakan JavaScript dan tambah kelas CSS secara bersyarat.

<code class="js">if (!hasTouch()) document.body.className += ' hasHover'</code>

<code class="css">body.hasHover a:hover { color: blue; }</code>

Kebaikan:

• Lebih dipercayai daripada pertanyaan media untuk peranti sentuhan campuran.
  Keburukan:
• Masih dipengaruhi oleh peristiwa emulasi sentuhan (cth., kursor tetikus pada skrin sentuh).

Penyelesaian Muktamad: Pengesanan Tuding Dinamik

Dayakan atau lumpuhkan gaya tuding berdasarkan kursor tetikus dan acara sentuh.

<code class="js">function watchForHover() {
  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)
}</code>

Kebaikan:

• Penyelesaian paling mantap, berfungsi pada semua penyemak imbas.
• Menyesuaikan gaya tuding pada input peranti secara dinamik.
  Keburukan:
• Mempunyai kelewatan yang singkat selepas peristiwa sentuhan (cth., 500ms) untuk mengelakkan peristiwa gerakan tetikus yang dicontohi.

Atas ialah kandungan terperinci Cara Melumpuhkan Gaya :hover dengan Berkesan pada Peranti Sentuh: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!