Bagaimana untuk mengelakkan kesan tuding melekit untuk butang pada peranti sentuh?-tutorial js-php.cn

Bagaimana untuk mengelakkan kesan tuding melekit untuk butang pada peranti sentuh?

WBOY

Lepaskan： 2023-08-22 12:25:06

ke hadapan

838 orang telah melayarinya

Bagaimana untuk mengelakkan kesan tuding melekit untuk butang pada peranti sentuh?

Pada peranti sentuh, apabila menambahkan kesan tuding menggunakan CSS, elemen tersebut menjadi tetap. Artikel ini akan mengajar anda Beritahu kami cara menyelesaikan masalah ini. Pada peranti sentuh, tiada kesan hover, jadi butang kekal dalam keadaan asalnya. Tidak Menggunakan JavaScript: Anda boleh menggunakan ciri pertanyaan media CSS untuk menyelesaikan masalah ini. Peranti yang disokong hover ialah yang sepadan dengan keperluan "hover: hover". Untuk memastikan CSS berikut ditambah Pada peranti ini sahaja, gunakan pertanyaan media dengan syarat ini. Hanya peranti yang menyokong tuding akan Tiada kesan tuding kelihatan pada peranti sentuh. Apabila anda menuding pada ini, anda boleh melihat kesan tuding ditambah

Seperti yang anda tahu, teknologi skrin sentuh tidak menyokong tingkah laku :hover. oleh itu, Apabila membuat tapak web responsif, anda harus mempertimbangkan dengan teliti bila dan tempat untuk digunakan : interaksi tuding. Sesetengah peranti skrin sentuh akan kehilangan kesan hover pautan mudah Buka URL. Anda akan melihat gaya :hover untuk jangka masa yang singkat sebelum halaman berubah Pada iOS, kerana :hover diaktifkan sebelum acara klik
Ini adalah isu kecil yang tidak memberi kesan kepada kefungsian tapak. Berikut ialah: hover, which Sama ada gunakan ciri CSS paparan atau keterlihatan untuk menunjukkan atau menyembunyikan elemen lain, ya Masalah sebenar.

Ada dua kaedah yang boleh anda gunakan untuk menyelesaikan masalah ini.

Peranti tanpa JavaScript - Anda boleh menggunakan fungsi pertanyaan media CSS untuk membetulkannya. Peranti yang menyokong ciri ini hover dirujuk dengan syarat "hover: hover". Menambahkan CSS berikut hanya pada peranti tersebut Menggunakan pertanyaan media bersama-sama dengan syarat ini dijamin.

Coretan kod

@media(hover: hover) {
   #btn:hover {
      background-color: #ccf6c8;
   }
}

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Ini hanya menambah kesan tuding untuk peranti yang menyokong tuding; tiada kesan tuding untuk peranti sentuh. wujud Dalam kes ini, warna latar belakang butang berubah apabila tetikus dituding di atasnya. Pada peranti sentuh, ada Tiada kesan hover, jadi butang kekal dalam keadaan asalnya.

<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #myButton {
         background-color: #096381;
         margin: 3%;
         font-size: 30px;
         color: #fff;
      }
      @media (hover: hover) {
         #myButton:hover {
            /*On devices that support hover, add a hover effect to the button.*/
            background-color: #0a92bf;
         }
      }
   </style>
</head>
<body>
   <h2>Welcome to TutorialsPoint!</h2>
   <p>Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments.</p>
   <button type="button" id="myButton">
      Submit
   </button>
</body>
</html>

Salin selepas log masuk

Kod di atas akan menghasilkan output berikut: Ini adalah hasil pada skrin bukan sentuh.

Langkah kedua menggunakan JavaScript - Dalam kaedah ini fungsi JavaScript berikut akan digunakan untuk menyemak Sama ada kita menggunakan peranti sentuh atau tidak. Setiap kali pengguna menyentuh elemen, Respons acara ontouchstart mengembalikan nilai sebenar. Bilangan maksimum titik sentuh berturut-turut yang disokong oleh peranti dikembalikan oleh navigator.maxTouchPoints.

Ciri yang disokong oleh peranti ini dikembalikan oleh navigator.maxTouchPoints

Dalam navigator.msMaxTouchPoints, fungsi yang sama tersedia di bawah awalan vendor "ms" Menyasarkan IE 10 dan pelayar terdahulu. Oleh itu, jika peranti menyokong fungsi sentuhan, yang ditentukan fungsi kembali benar.

Coretan kod

function is_touch_enabled() {
   return ('ontouchstart' in window) ||
   (navigator.maxTouchPoints > 0) ||
   (navigator.msMaxTouchPoints > 0);
}

Salin selepas log masuk

Contoh 2

diterjemahkan sebagai:

Contoh 2

Dalam contoh ini, mari lihat bagaimana kita boleh menambah kelas pada butang kita jika fungsi sentuhan tidak didayakan. Seperti yang ditunjukkan di bawah:

Dalam kod di bawah, kelas ini menyediakan kesan tuding untuk butang dalam CSS −

<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #myButton {
         background-color: #096381;
         margin: 3%;
         font-size: 30px;
         color: #fff;
      }
      .myButton2:hover {
         background-color: #0a92bf !important;
         /*The myButton2 class now has a hover effect.*/
      }
   </style>
</head>
<body onload="touchHover()">
   <p>TutorialsPoint have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. <br>You will have to register with us to avail these premium services.</p>
   <button type="button" id="myButton">Submit</button>
   <script>
      function touchHover() {
         function is_touch_enabled() {
            // Verify that touch is turned on
            return "ontouchstart" in window || navigator.maxTouchPoints > 0 ||
               navigator.msMaxTouchPoints > 0;
         }
         if (!is_touch_enabled()) {
            // Add the "myButton2" class if touch is not enabled.
            let verifyTouch = document.getElementById("myButton");
            verifyTouch.classList.add("myButton2");
         }
      }
   </script>
</body>
</html>

Salin selepas log masuk

Kod di atas akan menghasilkan output berikut: Ini adalah hasil pada peranti bukan sentuh.

Memandangkan tiada kesan tuding pada peranti sentuh, butang kekal dalam keadaan asalnya.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan kesan tuding melekit untuk butang pada peranti sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!