jQuery MouseLeave через группу классов?

Question

У меня есть следующий HTML

<div class="outer-field"></div>
<div class="outer-field"></div>
<div class="outer-field"></div>
<div class="outer-field"></div>

Который используется в функции

jQuery('.outer-field').live('mouseleave', 
      function () {
        console.log('in outer');
});

Моя проблема в том, что я хочу, чтобы функция "mouseleave" запускалась только тогда, когда она находится за пределами ALL из них? В данный момент он стреляет, переходя от одного к следующему .outer-field?

т.е. Я хочу, чтобы он выстрелил один раз, если он снаружи

Как я могу это сделать?

Answer 1

Если вы не можете изменить структуру HTML (что было бы более простым решением), вам нужно отложить выполнение кода mouseout, обернув меня функцией, переданной setTimeout. Сохраните возвращаемое значение в переменной и используйте clearTimeout при наведении курсора на один из элементов, что отменит запланированное выполнение.

Answer 2

Вы должны заключить все div в один, который вы слушаете, чтобы оставить мышь ...