Bagaimanakah Anda Boleh Melumpuhkan Gaya CSS :hover pada Peranti Sentuh dengan Berkesan?

Mengabaikan :Tuding Gaya CSS pada Peranti Sentuh

Apabila membangunkan tapak web, adalah wajar untuk mengalih keluar atau mengabaikan :tuding perisytiharan CSS untuk peranti sentuh, kerana pengisytiharan ini boleh menjadi janggal dan tidak perlu.

Cepat dan Kotor: Menggunakan JavaScript

Satu pendekatan ialah menggunakan JavaScript untuk mengalih keluar semua peraturan gaya yang mengandungi :hover. Kaedah ini serasi dengan penyemak imbas lama dan tidak memerlukan pengubahsuaian CSS.

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (hasTouch()) {
  // Loop through stylesheets and remove :hover rules.
  ...
}</code>

Penghadan:

• Lembaran gaya mesti dihoskan pada domain yang sama.
• Tetikus dan peranti sentuh bercampur masih boleh mencetuskan peristiwa :tuding, memberi kesan negatif kepada pengalaman pengguna.

CSS Sahaja: Pertanyaan Media

Sebagai alternatif, anda boleh menggunakan pertanyaan media untuk melumpuhkan gaya :tuding untuk peranti tertentu.

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

Penghadan:

• Memerlukan pertanyaan media, yang tidak disokong oleh semua penyemak imbas.
• Tidak berfungsi pada tetikus bercampur dan peranti sentuh.

Paling Teguh: Pengesanan JavaScript

Untuk penyelesaian yang paling boleh dipercayai, mengesan peristiwa sentuh menggunakan JavaScript dan menyediakan peraturan :hover dengan kelas tersuai.

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

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (!hasTouch()) {
  document.body.className += ' hasHover';
}</code>

Kaedah ini mengatasi batasan pendekatan CSS sahaja tetapi mungkin masih mempunyai masalah pada tetikus campuran dan peranti sentuh.

Untuk menangani perkara ini, laksanakan pendekatan yang lebih canggih yang membolehkan kesan tuding berdasarkan pergerakan kursor tetikus dan melumpuhkannya pada acara sentuhan.

<code class="javascript">function watchForHover() {
  // Initialize variables for touch detection.
  ...

  // Add or remove the "hasHover" class depending on user actions.
  ...
}

watchForHover();</code>

Penyelesaian ini menyediakan pengesanan dan pengendalian yang boleh dipercayai gaya tuding pada semua peranti, tanpa menjejaskan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Melumpuhkan Gaya CSS :hover pada Peranti Sentuh dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!