Wie kann ich Hover-Effekte auf Touch-Geräten simulieren?

Simulieren von Hover-Effekten auf Touch-Geräten

Mit der weit verbreiteten Verwendung von Touch-fähigen Geräten können klassische Mausinteraktionen wie Hover-Effekte nachgebildet werden eine Herausforderung. Dieses Problem tritt auf, wenn versucht wird, Hover-Effekte allein mit CSS zu erstellen, da es nur für Mauseingaben gilt. Glücklicherweise gibt es eine Lösung, die die Einbindung von JavaScript und die Änderung des CSS beinhaltet.

Implementieren der Simulation

Um Hover-Effekte bei langer Berührung zu simulieren, befolgen Sie diese Schritte:

1. Fügen Sie dem HTML-Element, an dem der Hover-Effekt erfolgen soll, eine Klasse namens „hover“ hinzu auftreten.
2. Fügen Sie den folgenden JavaScript-Code hinzu, um die Berührungsverarbeitung zu aktivieren:

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

3. Ändern Sie im CSS die Hover-Effektdefinition so, dass sie die Klasse „.hover_effect“ enthält :

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

4. Fügen Sie optional das folgende CSS hinzu, um die Browserauswahl zu deaktivieren touch:

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

Erklärung

Diese Lösung nutzt die Ereignisse „Touchstart“ und „Touchend“, die auf Touch-fähigen Geräten ausgelöst werden. Wenn der Finger des Benutzers den Bildschirm berührt, wird das Ereignis „touchstart“ ausgelöst und die Klasse „hover_effect“ zum HTML-Element mit der Klasse „hover“ hinzugefügt. Wenn die Berührung endet, wird das Ereignis „touchend“ ausgelöst, wodurch die Klasse „hover_effect“ entfernt und der Hover-Effekt effektiv simuliert wird.

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