Javascript Mouseover Bubbling From Kids

Question

Ive got the following html setting:

<div id="div1"> <div id="content1">blaat</div> <div id="content1">blaat2</div> </div> 

it is a style, so you cannot hang div1 without hanging one of the other two divs. Now I have a mouseout on div1.
The problem is that my div1.mouseout is triggered when I switch from content1 to content2 because their mouse mice are bubbling.
and the purpose of the event, the currentTarget or relatedTarget property is never div1, since it never hangs directly ...
I have been looking crazy for it, but I can find articles and solutions to problems that match what I need. It seems trivial, but I can't get it to work ...
Thinking div1 should ONLY start when the mouse leaves div1.

One possibility would be to set some data for mouse and mouse input, but I am convinced that this should work out of the box as it is just a mouse ...

EDIT:

 bar.mouseleave(function(e) { if ($(e.currentTarget).attr('id') == bar.attr('id')) { bar.css('top', '-'+contentOuterHeight+'px'); $('#floatable-bar #floatable-bar-tabs span').removeClass('active'); } }); 

changed mouse to mouse and code worked ...

Answer 1

Use the mouseleave event or mouseout to do this, it handles your specific problem. See here for more details.

From the documents of distinction:

The mouseleave event differs from mouseout in the way it handles event bubbles. If the mouse was used in this example, then when the mouse pointer moves out of the internal element, the handler will be launched. This is usually an undesirable behavior. On the other hand, the mouseleave event fires only its handler when the mouse leaves the element to which it is bound, and not the child. Thus, in this example, the handler starts when the mouse leaves the Outer element, but not the Inner element.

Layout Example:

 <div id="outer"> Outer <div id="inner"> Inner </div> </div> 

Answer 2

The hover method has two parameters: first for the mouse and second for the mouse.

 $('your_div').hover(function(){ // your code here. }, function(){// any mouse out code here})