Javascript Mouseover кипящий от детей

Question

Ive получил следующие настройки HTML:

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

это стиль, так что вы НЕ можете парить Div1 без зависания одного из 2-х других дивы. Теперь у меня есть mouseout на div1.
Проблема в том, что мой div1.mouseout запускается, когда я перехожу из content1 в content2, потому что их мышиные пузырьки пузырятся.
и целевые объекты currentTarget или relatedTarget никогда не являются div1, так как они никогда не зависают напрямую ...
Я искал безумного для этого, но я могу найти статьи и решения для проблем, которые обращаются Что мне нужно. Это кажется тривиальным, но я не могу заставить его работать ...
Мышь div1 должна ТОЛЬКО запускаться, когда мышь покидает div1.

Одной из возможностей было бы установить некоторые данные о мыши ввода и MouseLeave, но я убежден, что это должно работать из коробки, так как это просто 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'); 
       } 
      }); 

изменил MouseOut на MouseLeave и код работал ...

Answer 1

Используйте mouseleave событие вместо или mouseout для этого, он обрабатывает конкретный вопрос. See here for details

Из документов на разнице:

MouseLeave события отличается от отведения указателя мыши в том, как он обрабатывает событие пузыриться. Если мышь использовалась в этом примере, тогда, когда указатель мыши перемещается из внутреннего элемента, обработчик будет запущен. Обычно это нежелательное поведение. С другой стороны, событие mouseleave запускает только его обработчик, когда мышь покидает элемент, к которому он привязан, а не потомок. Таким образом, в этом примере обработчик запускается, когда мышь покидает элемент Outer, но не элемент Inner.

Пример разметки:

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

Answer 2

метод hover имеет два параметра, первый для мыши в и второй для мыши из.

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