'onmouseover' working unexpectedly in Javascript

I have a div in which there is a link. When a 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 have also added the function basic_nav_mouseout to the ommouseout attribute of the parent which should set the background-imag开发者_StackOverflowe of the parent div to none when the mouse pointer leaves the div. However, strangely, the function basic_nav_mouseout() is getting called as soon as the mouse pointer in leaving the link in the parent div. Here is a test page : http://spats.in/test/. Look at the links 'about' ,'people','connect' on the top right corner.

Where am I going wrong?

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

Mouseover and mouseout events trigger when you move the mouse over the bound element, as expected, but they also fire a separate event when you mouse over any inner elements within the parent element - this is obviously undesirable in most circumstances.

Basically, to fix your problem, use the mouseenter and mouseleave events instead.

From a user experience point of view, I'd encourage you to bind both events to the link, so that the special background colour actually indicates that the link is active - I think I'd find the effect you are trying to achieve quite misleading, because the highlighted background would make me think that I can still click the link, even though I cannot..

If you want to keep the visual effect you've current got (with a tall coloured area behind each link), make the link take up the whole box - i.e. 100% of the height and width of the div.

If onmouseover is set on the link, onmouseout should be set on the same element.

onmouseout gets triggered every time a child node is hovered over, you need to check the calling target.

http://www.quirksmode.org/js/events_mouse.html is a good resource.

I'm no javascript expert, but shouldn't you wait with binding the function to the event until the page is fully loaded? So:

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

Also (correct me if I'm wrong) I don't think you have to give the object as an argument in '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 though, my only (little) experience is with the Prototype library.