Wie können Sie :hover-CSS-Stile auf Touch-Geräten effektiv deaktivieren?

Ignorieren von :hover-CSS-Stilen auf Touch-Geräten

Bei der Entwicklung von Websites ist es wünschenswert, :hover-CSS-Deklarationen für Touch-Geräte zu entfernen oder zu ignorieren. da diese Deklarationen umständlich und unnötig sein können.

Schnell und schmutzig: Verwendung von JavaScript

Ein Ansatz besteht darin, JavaScript zu verwenden, um alle Stilregeln zu entfernen, die :hover enthalten. Diese Methode ist mit älteren Browsern kompatibel und erfordert keine Änderung des CSS.

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (hasTouch()) {
  // Loop through stylesheets and remove :hover rules.
  ...
}</code>

Einschränkungen:

• Stylesheets müssen auf derselben Domain gehostet werden.
• Gemischte Maus- und Touch-Geräte können immer noch :hover-Ereignisse auslösen, die sich negativ auf die Benutzererfahrung auswirken.

Nur ​​CSS: Medienabfragen

Alternativ können Sie Medienabfragen verwenden, um :Hover-Stile für bestimmte Geräte zu deaktivieren.

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

Einschränkungen:

• Erfordert Medienabfragen, die nicht vorhanden sind wird von allen Browsern unterstützt.
• Funktioniert nicht auf gemischten Maus- und Touch-Geräten.

Das Robusteste: JavaScript-Erkennung

Für die Zuverlässigste Lösung: Erkennen Sie Berührungsereignisse mithilfe von JavaScript und stellen Sie :hover-Regeln eine benutzerdefinierte Klasse voran.

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

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (!hasTouch()) {
  document.body.className += ' hasHover';
}</code>

Diese Methode überwindet die Einschränkungen reiner CSS-Ansätze, kann aber dennoch Probleme bei gemischten Maus- und Mausbewegungen verursachen Touch-Geräte.

Um dieses Problem zu beheben, implementieren Sie einen ausgefeilteren Ansatz, der Hover-Effekte basierend auf der Bewegung des Mauszeigers ermöglicht und sie bei Berührungsereignissen deaktiviert.

<code class="javascript">function watchForHover() {
  // Initialize variables for touch detection.
  ...

  // Add or remove the "hasHover" class depending on user actions.
  ...
}

watchForHover();</code>

Diese Lösung bietet eine zuverlässige Erkennung und Handhabung von Hover-Stilen auf allen Geräten, ohne das Benutzererlebnis zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie können Sie :hover-CSS-Stile auf Touch-Geräten effektiv deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!