jquery mouseout problem

Question

hello 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/

Answer 2

There seems to be a bit of difference between the mouseout and mouseover events. jimyi has the correct solution for your problem, I just wanted to include some additional links for completeness.

• quirksmode
• Quick example of mouseout and mouseleave
• What looks like a much more in depth look at the difference between mouseout and mouseleave