Ich versuche, einen Weg zu finden, einen Hover-Effekt für mobile Geräte zu simulieren. Ich habe gesucht, aber keiner scheint zu funktionieren.
Das Element, das ich versuche, einen mobilen Hover-Effekt zu erhalten, ist ein Link, der beim Hover seine Farbe ändert.
Gut, es kann viel mit dem Telefon zu tun haben, auf dem Sie gerade testen. Normalerweise teste ich mit android, das für lange drücken und abrutschen scheint (also gibt es kein onMouseUp event) durch Auslösen der :hover oder :focus -Zustand.
Es stellt sich wirklich die Frage, ob es wirklich einen Wert hat, wenn ein Benutzer diesen Zustand wirklich nicht auslösen kann. :Hover wurde für die Desktop-Nutzung mit einer Maus entwickelt, die Replikation dieser Interaktionen auf Mobilgeräten scheint kontraproduktiv zu sein.
Wenn Sie versuchen, eine wirklich interessante Interaktion für Mobilgeräte zu erreichen, weil es schwierig ist, einen Hover-Status auszulösen, ohne das onMouseUp -Ereignis auszulösen, können Sie besser Elemente verwenden, für die keine Links angehängt sind klickt, ohne einen Link auszulösen.
jQuery hat event.preventDefault() , was für andere Bedürfnisse hilfreich sein kann.
Neue Smartphones auf dem Markt unterstützen tatsächlich Hover, ohne JS aufrufen zu müssen, damit es funktioniert. Regelmäßige Verbindungen mit den Pseudo-Klassen a: hover anchor erreichen die Hover-Aktion, solange das Smartphone die Hover-Geste unterstützt.
Um mouseover Effekt in Javascript zu geben, müssen wir jquery-ui.js und jquery.ui.touch-punch.min.js verwenden, von ui js erhalten wir zwei wichtige Funktionen droppable(); and draggable();
Dadurch kann das Element per Drag & Drop verschoben werden, jedoch wird draggable = true in HTML5 überschrieben
Also, wenn wir den gleichen Code für dekstop sowie Telefon verwenden möchten, dann verwenden Sie wie folgt
Damit können wir den gleichen Code sowohl in dekstop als auch in mobilen Anwendungen ausführen
jetzt der zweite wichtige Punkt, in HTML5 verwenden wir dragstart(), dragleave(), dragover(), drop() für verschiedene Operationen in Bezug auf Drag & Drop, aber in mobilen wir benötigt touchstart(), touchmove(), touchend() and touchcancel() für Drag & Drop, die wir von jquery.ui.touch-punch.min.js bekommen, aber für Maus über Effekt müssen wir verwenden Logik wie folgt
Wenn wir das element touchmove -Ereignis ziehen, ist fire, also benutze
%Vor%Es gibt einen Zoom-Effekt bei moseover.