Bagaimana Anda Boleh Mencegah Kesan :hover yang Tidak Diingini pada Peranti Skrin Sentuh?

Mengatasi :hover Quirks pada Peranti Skrin Sentuh

Masalah: :gaya CSS hover dicetuskan secara tidak sengaja pada peranti sentuh, menyebabkan kesan yang tidak diingini.

Penyelesaian: Laksanakan strategi yang komprehensif untuk melumpuhkan atau mengabaikan perisytiharan :tuding pada platform skrin sentuh.

Penyingkiran Cepat dan Kotor: JavaScript

Untuk pendekatan pragmatik, JavaScript boleh digunakan untuk mengalih keluar semua gaya :hover. Ambil perhatian bahawa lembaran gaya mesti dihoskan pada domain yang sama dan ia mungkin menghalang UX pada peranti sentuhan/tetikus bercampur.

<code class="js">function hasTouch() {
  // Check for touch capabilities
}

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>

Penyelesaian Berasaskan CSS

Pertanyaan Media:

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

Walau bagaimanapun, penyelesaian ini hanya berfungsi pada peranti iOS 9.0 atau Android 5.0.

Peraturan Bersyarat:

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

Ini memerlukan pendahuluan semua peraturan :hover dengan kelas (cth., hasHover) yang ditambahkan atau dialih keluar berdasarkan pengesanan skrin sentuh.

Pengesanan Optimum: JavaScript dan CSS

Penyelesaian paling mantap menggabungkan pengesanan sentuhan JavaScript dengan CSS peraturan bersyarat.

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>

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

Kaedah ini mendayakan kesan tuding apabila tetikus dikesan dan melumpuhkannya apabila disentuh.

Syor Pelaksanaan

Untuk penyemak imbas moden, a gabungan peraturan bersyarat JavaScript dan CSS menggunakan kelas adalah disyorkan. Untuk penyemak imbas lama, pengalihan keluar gaya :hover berasaskan JavaScript ialah pilihan yang berdaya maju.

Sumber Tambahan:

• [Contoh GitHub](https:// jsfiddle.net/57tmy8j3/)

Atas ialah kandungan terperinci Bagaimana Anda Boleh Mencegah Kesan :hover yang Tidak Diingini pada Peranti Skrin Sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!