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
825 Leute haben es durchsucht
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.
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!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
