Wie simuliere ich Hover-Effekte auf Touch-fähigen Geräten?

Simulieren von Hover-Effekten auf Touch-fähigen Geräten

Touch-fähigen Geräten fehlt die traditionelle Hover-Funktionalität von Mäusen. Dies stellt eine Herausforderung dar, wenn man versucht, Hover-Effekte allein mit CSS zu reproduzieren.

Um dieses Problem zu beheben, besteht eine clevere Lösung darin, das CSS zu ändern und etwas JavaScript zu integrieren. Mithilfe von jQuery schaltet das folgende Snippet eine Klasse bei Berührungsstart- und -endereignissen um und simuliert so effektiv einen Hover-Zustand:

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

Fügen Sie im HTML einfach die Klasse „hover“ zu den Elementen hinzu, die Sie schweben lassen möchten.

Um die Auswirkungen von CSS-Hover-Regeln nachzuahmen, ändern Sie Ihr CSS so, dass es die folgende Syntax verwendet:

element:hover, element.hover_effect {
    rule:properties;
}

Fügen Sie außerdem das folgende CSS hinzu, um zu verhindern, dass der Browser den Hover-Effekt beeinträchtigt:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

Mit diesen Änderungen simulieren berührungsempfindliche Geräte nun Hover-Effekte und sorgen so für ein intuitiveres Benutzererlebnis.

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