Question

I have the following code which moves a DIV block 20px down on mouseover:

$('.outerDiv').mouseover(function()
{       
    $(this).animate({marginTop: "+=20px",},500);
});

$('.outerDiv').mouseout(function()
{       
    $(this).animate({marginTop: "-=20px",},500);
});

The div contains another div inside. The problem is that when the mouse is over the inner div, the mouse out event occurs and the div block shift up 20px. I am wondering if there is a way to only fire the mouseout event if the mouse is only outside the outer div.

Here is the HTML structure:

<div class='outerDiv'>
    <div class='innerDiv'>
       bla bla bla
    </div>
</div>

Answer 1

You need to use mouseenter and mouseleave instead of mouseover and mouseout which would bubble up to the parent when triggered on child elements.

Here’s an excerpt from the docs.

mouseover fires when the pointer moves into the child element as well,
while mouseenter fires only when the pointer moves into the bound
element.

Also as suggested by j08691 you may just want to use .hover as this method binds handlers for both mouseenter and mouseleave events.