Mouse events bubbling from an absolute-positioned element

Question

I've got this:

<div id="parent">
    <div id="child">
        &nbsp;
    </div>
</div>

$(document).ready(function() {
    $('#parent').on('mouseout', function() {
        alert('Mouse out!');
    });
});

http://jsfiddle.net/aYGBC/2/

Now when I move my mouse on the blue block and move it out somewhere everything's ok. But when I move my mouse on the blue block and then on the red block, the mouseout event is also triggered. Why is this happening and how can I make the mouseout event only occur when I actually move the mouse out of the block?

Answer 1

Use mouseleave, which "is dispatched when a mouse or another pointing device leaves the physical space given to the element and to all of its descendants":

$(document).ready(function() {
    $('#parent').on('mouseleave', function() {
        alert('Mouse out!');
    });
});