Heim > Artikel > Web-Frontend > Wie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?
Wie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?
- WBOYnach vorne
- 2023-08-22 12:25:06781Durchsuche
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;
}
}
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>
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ückgegebenIn 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);
}
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>
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!