Wie repliziere ich Hover-Effekte für lange Berührungen in Touch-fähigen Browsern?

Simulieren von Hover-Effekten mit Touch-Gesten

Szenario:

Sie haben eine Webseite mit HTML-Elementen, die mit CSS gestaltet sind. Insbesondere gibt es Elemente mit einem „Hover“-Effekt, bei dem sich ihre Farbe ändert, wenn der Cursor darüber schwebt. In einem berührungsaktiven Browser möchten Sie dieses Verhalten jedoch bei langen Berührungen reproduzieren.

Lösung:

Um dies zu erreichen, befolgen Sie diese Schritte:

1. CSS ändern:Fügen Sie die folgende Klasse zu Ihren HTML-Elementen hinzu, für die Sie Hover-Effekte aktivieren möchten:

<code class="css">p {
  color:black;
}

p:hover, p.hover_effect {
  color:red;
}</code>

Dadurch wird sichergestellt, dass der „hover_effect Die Klasse „repliziert den Stil der Pseudoklasse „:hover“.

2. JavaScript hinzufügen: Implementieren Sie den folgenden Code mit jQuery:

<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>

3. Standardverhalten des Browsers verhindern: Um die standardmäßigen Touch-Aktionen des Browsers (z. B. Kontextmenü) zu verhindern, fügen Sie Ihrem Stylesheet das folgende CSS hinzu:

<code class="css">.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}</code>

Diese Kombination von Modifikationen ermöglicht Touch-and-Hold-Gesten auf geeigneten Elementen, um Hover-Ereignisse für Touch-fähige Browser zu simulieren.

Das obige ist der detaillierte Inhalt vonWie repliziere ich Hover-Effekte für lange Berührungen in Touch-fähigen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!