. I think it might be because you have to attach the eventhandler on the document, or maybe its just an syntax error ("header" should be ".header"). If you move the mouse from #parent to #child, you see two events on #parent: As shown, when the pointer moves from #parent element to #child, two handlers trigger on the parent element: mouseout and mouseover: If we dont examine event.target inside the handlers, then it may seem that the mouse pointer left #parent element, and then immediately came back over it. Thats like the task Tooltip behavior, but here the annotated elements can be nested. .mouseout(function() { jquery - mouseover mouseout not working properly - Stack Overflow , ,