Нужна помощь с этим кодом на jQuery onmouseout элемента ul

Question

Я создал навигацию, используя <UL> и <LI>.При выходе из навигации <UL> хочу что-то сделать.Код, который я написал ниже.

Пожалуйста, помогите мне понять, почему код ниже выполняется при переходе от одного <LI> к другому, а не только при выходе из <UL>.

<ul id='navigation'>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

#navigation li
{
   display:inline;
   float:left;   
   width:50px;
   border-right:1px solid black;
   padding:2px;
}

jQuery("#navigation").mouseout(function(){

   alert("hi"); 

});

Answer 1

Из документации JQuery - http://api.jquery.com/mouseout/

Этот тип события может вызвать много головные боли из-за пузырящихся событий. За случай, когда указатель мыши перемещается из внутреннего элемента в этом Например, событие mouseout будет отправлено к этому, тогда сочитесь до Внешнего. Это может вызвать связанную мышь Обработчик в неподходящее время. Увидеть обсуждение .mouseleave () для полезная альтернатива.

См. этот пример jsfiddle , показывающий mouseout и mouseleave .

Answer 2

try mouseleave

Событие mouseleave отличается от mouseout тем, как оно обрабатывает всплывающее событие.Если в этом примере использовались указатели мыши, то при перемещении указателя мыши из элемента «Внутренний» обработчик срабатывает.Это обычно нежелательное поведение.Событие mouseleave, с другой стороны, запускает свой обработчик только тогда, когда мышь покидает элемент, с которым она связана, а не потомок.Таким образом, в этом примере обработчик срабатывает, когда мышь покидает внешний элемент, но не внутренний.

DEMO