Confusion with jQuery mouseout event

Question

My HTML:

<div id="parent">
    <div id="child">cx</div>
</div>

When I use jQuery

$('#parent').mouseout(function(){
    //something here
});

I wonder why when my mouse enter the child div the function fires. I'm still inside parent div. I want that mouseout function to fire only when I leave the parent div not when I'm on any child div.

http://jsbin.com/esiju/ << example

Cheers

Answer 1

This is what the mouseleave event is for.

$('#parent').mouseleave(function(){
//something here
});

http://api.jquery.com/mouseleave/