Wie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?-js-Tutorial-php.cn

Wie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?

WBOY

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

nach vorne

876 Leute haben es durchsucht

Wie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?

Auf Touch-Geräten wird das Element beim Hinzufügen eines Hover-Effekts mithilfe von CSS fixiert. Dieser Artikel wird es Ihnen zeigen Sagen Sie uns, wie wir dieses Problem lösen können. Auf Touch-Geräten gibt es keinen Hover-Effekt, sodass die Schaltfläche in ihrem ursprünglichen Zustand bleibt. NEIN Verwendung von JavaScript: Sie können die Medienabfragefunktion von CSS verwenden, um dieses Problem zu lösen. Unterstützte Geräte Hover sind solche, die der Anforderung „hover: hover“ entsprechen. Um sicherzustellen, dass das folgende CSS hinzugefügt wird Verwenden Sie nur auf diesen Geräten Medienabfragen mit dieser Bedingung. Dies tun nur Geräte, die Hover unterstützen Auf Touch-Geräten sind keine Hover-Effekte sichtbar. Wenn Sie mit der Maus darüber fahren, können Sie den hinzugefügten Hover-Effekt sehen

Wie Sie wissen, unterstützt die Touchscreen-Technologie kein :hover-Verhalten. daher, Beim Erstellen einer responsiven Website sollten Sie sorgfältig überlegen, wann und wo Sie sie verwenden :Hover-Interaktion. Bei einigen Touchscreen-Geräten geht der Hover-Effekt einfacher Links verloren Öffnen Sie eine URL. Der :hover-Stil wird für kurze Zeit angezeigt, bevor sich die Seite ändert Unter iOS, weil :hover vor dem Klickereignis aktiviert wird
Dies sind kleinere Probleme, die keinen Einfluss auf die Funktionalität der Website haben. Hier ist ein:hover, welcher Verwenden Sie entweder die CSS-Eigenschaften „display“ oder „visibility“, um ein anderes Element anzuzeigen oder auszublenden, ja Das eigentliche Problem.

Es gibt zwei Methoden, mit denen Sie dieses Problem lösen können.

Geräte ohne JavaScript – Sie können CSS-Medienabfragefunktionen verwenden, um das Problem zu beheben. Geräte, die diese Funktion unterstützen Hover wird durch die Bedingung „hover:hover“ bezeichnet. Das Hinzufügen des folgenden CSS erfolgt nur auf solchen Geräten Die Verwendung von Medienabfragen zusammen mit dieser Bedingung ist garantiert.

Codeausschnitt

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

Nach dem Login kopieren

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Dies fügt Hover-Effekte nur für Geräte hinzu, die Hover unterstützen. Für Touch-Geräte gibt es keine Hover-Effekte. existieren In diesem Fall ändert sich die Hintergrundfarbe der Schaltfläche, wenn die Maus darüber bewegt wird. Auf Touch-Geräten ist dies der Fall Es gibt keinen Hover-Effekt, die Schaltfläche bleibt also in ihrem ursprünglichen Zustand.

<!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>

Nach dem Login kopieren

Der obige Code erzeugt die folgende Ausgabe: Dies ist das Ergebnis auf einem Nicht-Touchscreen.

Zweiter Schritt mit JavaScript – Bei dieser Methode wird die folgende JavaScript-Funktion zur Überprüfung verwendet Ob wir Touch-Geräte verwenden oder nicht. Immer wenn der Benutzer ein Element berührt, Die Antwort auf das Ereignis „ontouchstart“ gibt einen wahren Wert zurück. Maximale Anzahl aufeinanderfolgender Berührungspunkte die das Gerät unterstützt, wird von navigator.maxTouchPoints.

zurückgegeben Die von diesem Gerät unterstützten Funktionen werden von navigator.maxTouchPoints zurückgegeben

In navigator.msMaxTouchPoints ist die gleiche Funktionalität unter dem Herstellerpräfix „ms“ verfügbar. Zielt auf IE 10 und frühere Browser ab. Wenn das Gerät daher die Touch-Funktionalität unterstützt, ist die angegebene Funktion gibt true zurück.

Codeausschnitt

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

Nach dem Login kopieren

Beispiel 2

wird übersetzt als:

Beispiel 2

In diesem Beispiel sehen wir uns an, wie wir unserer Schaltfläche eine Klasse hinzufügen können, wenn die Touch-Funktionalität nicht aktiviert ist. Wie unten gezeigt:

Im folgenden Code stellt diese Klasse einen Hover-Effekt für die Schaltfläche in CSS bereit −

<!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>

Nach dem Login kopieren

Der obige Code erzeugt die folgende Ausgabe: Dies ist das Ergebnis auf einem Gerät ohne Touch-Funktion.

Da es auf Touch-Geräten keinen Hover-Effekt gibt, bleiben die Tasten in ihrem ursprünglichen Zustand.

Das obige ist der detaillierte Inhalt vonWie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!