Wie simuliere ich Hover-Effekte auf Touchscreens durch langes Drücken?

Auslösen von Hover-Effekten auf Touch-fähigen Geräten durch langes Drücken

Um Hover-Effekte auf Touch-fähigen Geräten wie Smartphones und Tablets zu reproduzieren können Sie eine Kombination aus CSS und JavaScript nutzen. So funktioniert es:

HTML-Markup

Fügen Sie eine Klasse mit dem Namen „hover“ zu jedem Element hinzu, auf das Sie den Hover-Effekt anwenden möchten. Zum Beispiel:

<code class="html"><p class="hover">Some Text</p></code>

CSS-Styling

Ändern Sie Ihr CSS so, dass es einen Hover-Effekt für die Klassen :hover und .hover_effect enthält. Die Klasse .hover_effect wird verwendet, um den Hover-Effekt auf Touch-Geräten zu simulieren:

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

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

JavaScript

Verwenden Sie JavaScript, um lange Druckereignisse zu erkennen. Hier ist ein Beispiel mit jQuery:

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

Dieser JavaScript-Code fügt Ereignishandler für Touchstart- und Touchend-Ereignisse für Elemente mit der „hover“-Klasse hinzu. Wenn eine Berührung beginnt oder endet, wird die Klasse „hover_effect“ für das berührte Element umgeschaltet.

Zusätzliches CSS

Um zu verhindern, dass der Browser Kontextmenüs anzeigt oder nach einer Bestätigung fragt, wann Wenn Sie Elemente auf Mobilgeräten berühren, fügen Sie die folgenden CSS-Regeln hinzu:

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

Ergebnis

Durch die Kombination dieser Elemente können Sie jetzt einen Hover-Effekt auf Touch-fähigen Geräten simulieren Geräte durch langes Drücken auf die gewünschten Elemente. Mit dieser Methode können interaktive Elemente wie Schaltflächen oder Links erstellt werden, ohne dass ein herkömmlicher Mauszeiger erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie simuliere ich Hover-Effekte auf Touchscreens durch langes Drücken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!