Wie eliminiere ich Sticky-Hover-Effekte auf Tasten für Touch-fähige Geräte?

So beseitigen Sie Sticky-Hover-Effekte auf Tasten für Touch-fähige Geräte

Beim Erstellen von Karussells mit permanenten Navigationstasten tritt ein häufiges Problem auf Touch-Geräte. Der Hover-Status der Schaltflächen, der normalerweise blau erscheint, wird „klebrig“ und bleibt auch nach dem Antippen aktiviert. Es wurden mehrere Ansätze zur Behebung dieses Problems untersucht:

• Das Hinzufügen einer No-Hover-Klasse auf dem Touchend kann das Problem beheben, aber es kann sich auf die Leistung auswirken und zu Kompatibilitätsproblemen auf Geräten wie Chromebooks mit Touch und Maus führen Funktionen.
• Die Implementierung einer Touch-Klasse für das documentElement und die entsprechende Änderung von CSS können das Problem ebenfalls beheben, sind jedoch nicht optimal für Geräte mit Touch- und Mausunterstützung.

Eine ideale Lösung wäre, den Schwebezustand beim Touchend zu entfernen. Allerdings steht hierfür keine direkte Methode zur Verfügung. Durch das Fokussieren auf ein anderes Element wird der Schwebezustand nicht entfernt. Während das manuelle Tippen auf ein anderes Element dies tut, bleibt das programmgesteuerte Auslösen dieser Aktion in JavaScript eine Herausforderung.

Um dieses Problem effektiv zu lösen, können Sie die neuesten Entwicklungen in CSS Media Queries Level 4 nutzen:

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

In diesem CSS heißt es im Wesentlichen: „Wenn das Gerät echtes Hovering unterstützt (z. B. über ein mausähnliches primäres Eingabegerät verfügt), wenden Sie den Button-Hover-Stil an.“

Für Browser, in denen diese Funktion noch nicht implementiert ist, a JavaScript-Polyfill kann verwendet werden, um die Hover-Unterstützung zu erkennen und eine benutzerdefinierte Klasse umzuschalten, sodass Sie den Hover-Stil bedingt anwenden können:

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

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

Diese Lösung eliminiert wirksam Sticky-Hover-Effekte für Touch-Geräte und behält gleichzeitig die gewünschte Ästhetik bei auf Geräten mit Mauseingabe.

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