jquery mouseout problem

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/

Answer 2

.mouseleave works perfectly here:

$("#parent").mouseleave(function(){
    //Enter stuff that should happen when mouse leaves 
    //the boundaries of the parent element
    // NOT including the children
});

.mouseout fires on mousing over child elements!

Answer 3

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