Heim > Web-Frontend > CSS-Tutorial > Wie können Sie unerwünschte :hover-Effekte auf Touchscreen-Geräten verhindern?

Wie können Sie unerwünschte :hover-Effekte auf Touchscreen-Geräten verhindern?

Linda Hamilton
Freigeben: 2024-10-27 16:19:02
Original
927 Leute haben es durchsucht

How Can You Prevent Unwanted :hover Effects on Touchscreen Devices?

Überwindung von :Hover-Macken auf Touchscreen-Geräten

Problem: :Hover-CSS-Stile werden unbeabsichtigt auf Touch-Geräten ausgelöst, was zu unerwünschten Effekten führt.

Lösung: Implementieren Sie eine umfassende Strategie zum Deaktivieren oder Ignorieren von :hover-Deklarationen auf Touchscreen-Plattformen.

Quick and Dirty: JavaScript-Entfernung

Für einen pragmatischen Ansatz: JavaScript kann verwendet werden, um alle :hover-Stile zu entfernen. Beachten Sie, dass Stylesheets auf derselben Domäne gehostet werden müssen und dies die UX auf gemischten Touch-/Mausgeräten behindern kann.

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

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>
Nach dem Login kopieren

CSS-basierte Lösungen

Medienabfragen:

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

Diese Lösung funktioniert jedoch nur auf iOS 9.0- oder Android 5.0-Geräten.

Bedingte Regeln:

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

Dies muss vorangestellt werden alle :hover-Regeln mit einer Klasse (z. B. hasHover), die basierend auf der Touchscreen-Erkennung hinzugefügt oder entfernt wird.

Optimale Erkennung: JavaScript und CSS

Die robusteste Lösung kombiniert die JavaScript-Berührungserkennung mit CSS bedingte Regeln.

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>
Nach dem Login kopieren
<code class="css">body.hasHover a:hover {
  color: blue;
}</code>
Nach dem Login kopieren
Nach dem Login kopieren

Diese Methode aktiviert Hover-Effekte, wenn eine Maus erkannt wird, und deaktiviert sie bei Berührung.

Implementierungsempfehlungen

Für moderne Browser a Eine Kombination von JavaScript- und CSS-Bedingungsregeln mithilfe von Klassen wird empfohlen. Für ältere Browser ist die JavaScript-basierte Entfernung von :hover-Stilen eine praktikable Option.

Zusätzliche Ressourcen:

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

Das obige ist der detaillierte Inhalt vonWie können Sie unerwünschte :hover-Effekte auf Touchscreen-Geräten verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage