Warum verhält sich der Mouseout-Handler in diesem Fall so unlogisch?
Rotes Quadrat ist der Teil eines Containers mit der Klasse "parent". Wenn ich die Maus über das rote Quadrat halte, verschwindet es. Aber warum? Ich habe erwartet, dass es nicht sollte.
Erwartetes Verhalten: Es verschwindet nicht, da das rote Quadrat ein Teil des ".parent" Containers ist und ich habe klar gesagt, dass das mouseout Ereignis in diesem Container auftritt.
Es gab einen Vorschlag, dass diese Frage ein Duplikat von
istJavaScript mouseover / mouseout-Problem mit Kindelement
In gewisser Weise - ja, aber ich denke, dass diese Frage einen Wert bietet, weil sie nicht nur die Lösung liefert ("Sie können das versuchen"), sondern auch erklärt, WARUM Sie diese verwenden sollten und WARUM die ursprüngliche Lösung nicht funktioniert wie es soll.
5 Antworten
Es ist das normale Verhalten des .mouseout () -Ereignisses.
Zeigt an, wie oft Mouseout- und Mouselave-Ereignisse ausgelöst werden. mouseout wird ausgelöst, wenn sich der Mauszeiger aus dem untergeordneten Element bewegt gut, während mouseleave nur feuert, wenn der Zeiger sich aus dem bewegt gebundenes Element.
Sie sollten .mouseenter () und .mouseleave () Ereignisse,
Wie andere Leute bemerkt haben, ist Ihr ursprüngliches Problem, dass die Ereignisse mouseover und mouseout auch für untergeordnete Elemente ausgelöst werden. Die Lösung für dieses Problem besteht darin, entweder jQuerys mouseenter und mouseleave Ereignisse oder einfach den JS-Code durch den CSS :hover Pseudoklasse .
Der Grund, warum die anderen JS- und CSS-Lösungen, die hier gepostet werden, sich jedoch manchmal unberechenbar verhalten (das Quadrat verschwinden, wenn Sie die Maus langsam darüber bewegen, aber nicht, wenn Sie es schnell bewegen, und nicht in allen Browsern, auch wenn Sie es tun) Bewegen Sie es langsam), weil, abhängig von Ihren Browser- und Schrifteinstellungen, möglicherweise eine kleine Lücke zwischen der oberen Textzeile und dem Quadrat darunter besteht. Wenn die Lücke vorhanden ist und der Mauszeiger beim Verschieben vom Text zum Quadrat darauf trifft, betrachtet der Browser die Maus als das übergeordnete Element und versteckt das Quadrat daher.
Wenn Sie eine hellblaue Hintergrundfarbe für das Elternelement festlegen, wird das Problem deutlich. Je nachdem, welche Schriftart und Zeilenhöhe der Browser wählt, können das übergeordnete Element und die Box wie folgt aussehen:
oder wie folgt:
Wenn Sie manuell eine besonders große Zeilenhöhe einstellen, wird das Problem leicht reproduzierbar (CSS-Beispiel basierend auf Thomas van Broekhovens Antwort ):
Es gibt zwei allgemeine Möglichkeiten, dieses Problem zu beheben. Die einfachste Möglichkeit, wenn möglich, besteht darin, das Elternelement zu einem Block zu machen, wodurch die Lücken zwischen den Linien beseitigt werden. Sie können auch position: absolute zum Stil des Quadrats hinzufügen, so dass das übergeordnete Element nicht erweitert wird, wenn es erscheint:
Alternativ können Sie, wenn Sie wirklich bei einem Inline-Element bleiben möchten (z. B. weil Sie möchten, dass es mehrere Textzeilen umbrechen kann), einen negativen oberen Rand auf dem Quadrat festlegen, um sicherzustellen, dass es sich überlappt Textzeile darüber. Wenn Sie nicht möchten, dass das Quadrat den Text sichtbar überlappt , können Sie den gesamten sichtbaren Inhalt des Quadrats weiter in ein inneres Element verschieben und einen entsprechenden positiven oberen Rand darauf setzen, wie folgt:
Ich weiß, dass dies nicht direkt Ihre JavaScript-Frage beantwortet, aber ich möchte Ihre Augen öffnen, wenn Sie nicht auf JavaScript beschränkt sind. Sie können dies einfach mit CSS erreichen.
Es ist wegen der Ereignisblasen. Wenn Sie die untergeordnete Spanne eingeben, wird jQuery Mouseout auslösen, weil Sie jetzt zu einer untergeordneten Spanne gegangen sind. Wenn Sie weitermachen möchten, verwenden Sie mouseenter und louseleave, die nicht ausgelöst werden, bis Sie das tatsächliche Element verlassen, unabhängig von untergeordneten Elementen.
%Vor%Tags und Links javascript jquery events jquery-events dom-events