Wie können wir Sticky-Hover-Effekte auf Tasten für Touch-Geräte beseitigen?

Verhindern von Sticky-Hover-Effekten für Tasten auf Touch-Geräten

Der anhaltende Hover-Zustand auf Tasten auf Touch-Geräten kann lästig sein. Um dieses Problem anzugehen, wurden verschiedene Lösungen vorgeschlagen, von denen jedoch keine völlig zufriedenstellend zu sein scheint. Ein Ansatz besteht darin, am Touch-Ende eine „No-Hover“-Klasse hinzuzufügen, was sich jedoch negativ auf die Leistung auswirkt und Hybridgeräte nicht berücksichtigt. Eine andere Möglichkeit besteht darin, dem Dokument eine „Touch“-Klasse hinzuzufügen, aber auch dies schlägt auf Geräten mit Touch- und Mausfunktionen fehl.

Die ideale Lösung: CSS Media Queries Level 4

Mit der Einführung von CSS Media Queries Level 4 ist eine verfeinerte Lösung entstanden:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Diese Medienabfrage zielt speziell auf Browser mit echter/nicht emulierter Hover-Unterstützung ab (z. B. Geräte mit Maus). -ähnliche Eingabemechanismen). Schaltflächen in solchen Browsern zeigen den blauen Hover-Effekt an.

Polyfill für ältere Browser

Für Browser ohne diese Funktion gibt es ein JavaScript-Polyfill, das echte Hover-Unterstützung simulieren kann:

html.my-true-hover button:hover {
    background-color: blue;
}

Das Polyfill erkennt Hovering-Fähigkeiten und schaltet die „my-true-hover“-Klasse entsprechend um:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

Diese Kombination aus CSS und JavaScript stellt sicher, dass Hover-Effekte auf beiden einwandfrei funktionieren moderne und ältere Touch-Geräte.

Das obige ist der detaillierte Inhalt vonWie können wir Sticky-Hover-Effekte auf Tasten für Touch-Geräte beseitigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!