Javascript Mouseover bubbling from children
- by Nicky De Maeyer
Ive got the following html setup:
<div id="div1">
<div id="content1">blaat</div>
<div id="content1">blaat2</div>
</div>
it is styled so you can NOT hover div1 without hovering one of the other 2 divs.
Now i've got a mouseout on div1.
The problem is that my div1.mouseout gets triggered when i move from content1 to content2, because their mouseouts are bubbling.
and the event's target, currentTarget or relatedTarget properties are never div1, since it is never hovered directly...
I've been searching mad for this, but I can only find articles and solutions for problems who are the reverse of what I need. It seems trivial but I can't get it to work...
The mouseout of div1 should ONLY get triggered when the mouse leaves div1.
One of the possibilities would be to set some data on mouse enter and mouseleave, but I'm convinced this should work out of the box, since it is just a mouseout...
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 the mouseout to mouseleave and the code worked...
