onmouseover' funktioniert unerwartet in Javascript

Question

Ich habe eine div in denen eine Verbindung besteht. Wenn ein Benutzer den Mauszeiger über den Link führt, rufe ich die Funktion basic_nav_mouseover() auf, die die Hintergrundbild des übergeordneten Div. Ich habe auch die Funktion basic_nav_mouseout in das ommouseout Attribut des Elternteils, das die Hintergrundbild der Muttergesellschaft div a keine wenn der Mauszeiger das Feld div . Seltsamerweise wird jedoch die Funktion basic_nav_mouseout() aufgerufen, sobald der Mauszeiger den Link im übergeordneten Div verlässt. Hier ist eine Testseite: http://spats.in/test/ . Schauen Sie sich die Links "Über", "Menschen" und "Verbinden" in der oberen rechten Ecke an.

Was mache ich falsch?

Answer 1

Es gibt eine wirklich gute Erklärung der Einschränkungen der Mouseover- und Mouseout-Ereignisse in den jQuery-Dokumenten (etwa auf halber Höhe der Seite).

Mouseover y mouseout Ereignisse ausgelöst, wenn Sie die Maus über das gebundene Element bewegen, wie erwartet, aber sie auch ein separates Ereignis auslösen, wenn Sie mit der Maus über ein inneres Element innerhalb des übergeordneten Elements fahren - dies ist in den meisten Fällen natürlich unerwünscht.

Um Ihr Problem zu beheben, verwenden Sie grundsätzlich die mouseenter y mouseleave Ereignisse statt.

Vom Standpunkt der Benutzerfreundlichkeit aus würde ich Sie ermutigen, beide Ereignisse an den Link zu binden, so dass die spezielle Hintergrundfarbe tatsächlich anzeigt, dass der Link aktiv ist - ich denke, ich würde den Effekt, den Sie zu erreichen versuchen, ziemlich irreführend finden, weil der hervorgehobene Hintergrund mich glauben lassen würde, dass ich den Link noch anklicken kann, obwohl ich das nicht kann.

Wenn Sie den visuellen Effekt beibehalten wollen, den Sie derzeit haben (mit einem hohen farbigen Bereich hinter jedem Link), lassen Sie den Link die gesamte Box einnehmen - d.h. 100% der Höhe und Breite des Divs.

Answer 2

Wenn onmouseover auf den Link gesetzt ist, sollte onmouseout auf dasselbe Element gesetzt werden.

Answer 3

onmouseout jedes Mal ausgelöst wird, wenn der Mauszeiger über einen untergeordneten Knoten bewegt wird, müssen Sie das aufrufende Ziel überprüfen.

http://www.quirksmode.org/js/events_mouse.html ist eine gute Quelle.

Answer 4

Ich bin kein Javascript-Experte, aber sollten Sie nicht mit der Bindung der Funktion an das Ereignis warten, bis die Seite vollständig geladen ist? So:

window.onload = function(){
    $('.item1').bind('mouseleave',basic_nav_mouseout);
};

Außerdem (korrigieren Sie mich, wenn ich falsch liege) glaube ich nicht, dass Sie das Objekt als Argument in "basic_nav_mouseout('.item1','red')" angeben müssen, Sie können einfach das Schlüsselwort "this" verwenden. So:

function basic_nav_mouseout(){
    this.css('background-image',"none");
}

Ich weiß nichts über die JQuery-Bibliothek aber, meine einzige (wenig) Erfahrung ist mit der Prototype-Bibliothek.