"onmouseover" unexpectedly works in Javascript

Question

I have a div that has a link in it. When the user takes the mouse pointer over the link, I call the basic_nav_mouseover () function, which changes the background image of the parent div. I also added basic_nav_mouseout function attribute ommouseout parent who has to set a background image of the parent div to none, when the mouse pointer leaves the div. However, oddly enough, the basic_nav_mouseout () function gets called as soon as the mouse leaves the link in the parent div. Here is the test page: http://spats.in/test/ . Look at the links about, people, connect in the upper right corner.

Where am I going wrong?

Answer 1

There's a really good explanation of the limitations of mouseover and mouseout events in jQuery docs (about half way down this page).

Mouseoverand mouseoutevents fire when you move the mouse over a related element, as expected, but they also trigger a separate event when you hover over any internal elements in the parent element - this is obviously undesirable in most circumstances.

Basically, to fix your problem, use mouseenter and mouseleave .

, , - , , , , , ..

, ( ), , 100% div.

Answer 2

onmouseover , onmouseout .

Answer 3

onmouseout , node , .

http://www.quirksmode.org/js/events_mouse.html - .

Answer 4

I am not a javascript expert, but should you wait with the function binding to the event until the page is fully loaded? So:

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

Also (correct me if I am wrong). I don’t think you should pass the object as an argument to 'basic_nav_mouseout ('. Item1 ',' red ')', you can just use the 'this' keyword. So:

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

I don't know anything about the JQuery library, but my only (small) experience is with the Prototype library.