Ich habe an einem schnellen Stift für ein Projekt gearbeitet, als es zu flackernden Problemen kam, wenn ein Element über ein Bild gezogen wurde, das ich verwende. Nicht wirklich sicher, was hier vor sich geht, scheint das Problem nicht aufzutreten, wenn Sie zuerst den Stift laden und es beim ersten Mal schwenken, aber danach beginnt es abzustehen.
Snippet-Demo:
Der Hover-Effekt berücksichtigt den Cursor und tatsächlich bewegen Sie ein Element mit dem Cursor, was passiert:
Sie beginnen innerhalb des Elements .tagger und alles ist in Ordnung, da sich der Cursor auf dem Element .tagger befindet. Kein Ereignis in #crowd , da der Cursor die #crowd bis jetzt nicht berührt / verschoben hat .
Sobald Sie auf etwas klicken oder etwas tun, das den Cursor auf #crowd bringt, lösen Sie den Hover -Effekt aus, was bedeutet, dass Sie das mouseleave! stark>
.tagger und lösen das mouseleave wie erwartet aus. #crowd und Sie lösen erneut den Hover! aus
.tagger erscheint wieder, der Cursor steht darauf und Sie lösen das mouseleave von #croud aus und so weiter ... Das Flimmern ist die unendliche Folge (4) (5) (4) (5) (4) ...
Um dies zu beheben, können Sie die Logik wie folgt ändern. Sie müssen die Funktion "verstecken / anzeigen" nicht anwenden, Sie können das Bild und .tagger -Element einfach in denselben Wrapper einfügen und overflow:hidden anwenden und dann nur die Klickereignisse beibehalten.
Hier ist der vollständige Code (Ich habe das Bild verkleinert, damit wir es im reduzierten Ausschnitt sehen können)
Sie nehmen an, dass .tagger genau die Grenze ist, die Sie gezeichnet haben. In Wirklichkeit gibt es dort eine unsichtbare Box. Die unsichtbare Box befindet sich oben auf #crowd. Wenn .tagger geladen wird, schwebt du nicht länger über #crowd, du schwebst über .tagger, was über #crowd liegt.
Um es zu beheben, können Sie .tagger von einer großen Box um die Maus herum auf 4 dünne Kästchen ändern, so dass sich nichts direkt unter der Maus befindet.
Sie haben fortlaufend hide() und show() .tagger wiederholt. mouseleave versteckt und :hover zeigt.
Es gibt zwei Möglichkeiten, dies zu beheben:
verschiebt den mouseover-Effekt innerhalb des #crowd .hover()
Löschen Sie den .delete() -Aufruf innerhalb des .mouseleave -Handlers
Auch ein Hinweis: Die Methode jQuery .hover() benötigt zwei Callbacks:
1. für die mouseenter
2. für die mouseleave
Also könnte der Code auch in dieser Hinsicht ein bisschen geändert werden.
Tags und Links javascript html jquery css