Wie können wir Sticky-Hover-Effekte auf Schaltflächen in Touch-Umgebungen verhindern?

Überwindung von Sticky-Hover-Effekten auf Schaltflächen in Touch-Umgebungen

Beim Entwerfen einer Benutzeroberfläche für Touch-Geräte kann die Verwaltung von Hover-Effekten auf Schaltflächen hilfreich sein eine Herausforderung sein. Diese scheinbar unkomplizierte Aufgabe wird durch den anhaltenden Hover-Zustand kompliziert, der auf Touchscreens auftritt, wo der Hover-Effekt nach der Berührung aktiviert bleibt, was zu einer ständig blauen Schaltfläche führt.

Ineffiziente Lösungen

Obwohl es Lösungen gibt, wie das Hinzufügen einer No-Hover-Klasse ontouchend oder die Verwendung einer Touch-Klasse mit documentElement, haben diese Methoden Nachteile. Sie können die Leistung beeinträchtigen und Geräte mit Touchscreen- und Mausfunktionen nicht bedienen.

Eine schwer fassbare Lösung

Die ideale Lösung würde darin bestehen, den Schwebezustand beim Touchend zu entfernen, aber Eine direkte Manipulation des Schwebezustands scheint schwer fassbar. Wenn Sie sich auf eine andere Stelle konzentrieren, kann der Hover-Effekt nicht entfernt werden, und das manuelle Antippen eines anderen Elements scheint ihn zu deaktivieren. Das programmatische Auslösen dieser Aktion bleibt jedoch ein Rätsel.

Ein Durchbruch

Die Einführung von CSS Media Queries Level 4 im Jahr 2018 brachte eine revolutionäre Lösung für dieses Dilemma:

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

In dieser Erklärung heißt es im Wesentlichen: „Wenn der Browser echtes Hovering unterstützt (z. B. ein mausähnliches Eingabegerät). ), wenden Sie den Hover-Stil an, wenn der Mauszeiger über Schaltflächen bewegt wird.“

Für Browser, denen diese Funktion fehlt, kann ein Polyfill Abhilfe schaffen. Mithilfe dieser Polyfüllung kann das obige futuristische CSS wie folgt umgewandelt werden:

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

Clientseitiges JavaScript aus der Polyfüllung erkennt dann die Hover-Unterstützung und schaltet das Vorhandensein der Klasse „my-true-hover“ entsprechend um und sorgt so für eine elegante Lösung für die Sticky-Hover-Effekte auf Touch-Geräten.

Das obige ist der detaillierte Inhalt vonWie können wir Sticky-Hover-Effekte auf Schaltflächen in Touch-Umgebungen verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!