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

Possible duplicate: http://stackoverflow.com/questions/350639/how-to-disable-mouseout-events-triggered-by-child-elements — Jesse Millikan, Apr 04 '10 at 17:47

score 26 · Accepted Answer · answered Apr 04 '10 at 17:48

26

This is what the mouseleave event is for.

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

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

answered Apr 04 '10 at 17:48

jimyi

30,733
3
38
34

score 1 · Answer 2 · edited Feb 19 '14 at 11:50

1

.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!

edited Feb 19 '14 at 11:50

dstronczak

2,406
4
28
41

answered Feb 19 '14 at 11:24

nikjohn

20,026
14
50
86

score 0 · Answer 3 · answered Apr 04 '10 at 18:02

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.

Confusion with jQuery mouseout event

3 Answers3