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

Unlicensed

Possible duplicate: #351139 – Exurbanite

Answer 1

This is what the mouseleave event is for.

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

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

Amphidiploid

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!

Jarad

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

Grantley