hover(): Триггер только при удалении внешнего элемента

Question

Я создаю несколько более сложную систему выпадающего меню, используя анимацию слайдов JQuery() и слайд-шоу(), а также событие «hover()».

Теперь у меня есть определенный элемент, который запускается с помощью функции «hover()», что отображается другой элемент. К сожалению, невозможно сделать эти два элемента, единственные дочерние элементы другого элемента (поскольку триггер находится в другой таблице).

Тем не менее, я хочу, чтобы этот новый элемент был отображен, чтобы показать, пока моя мышь не покинет BOTH новый элемент, а также триггерный элемент.

Есть ли способ достичь этого?

Заранее спасибо :)

Answer 1

Я использовал .mouseenter и .mouseleave добиться того, что может вы хотите: jsFiddle

var groups = {}; 
groups[1] = { 
    main: false, 
    sub: false 
}; 
$('.menu').mouseenter(function(e) { 
    var $target = $(e.target); 
    var group = $target.attr('data-group'); 
    var type = $target.attr('data-type'); 
    if (!(groups[group].sub || groups[group].main)) { 
     $('.sub[data-group='+ group +']').toggle(true); 
    } 
    groups[group][type] = true; 
}); 

$('.menu').mouseleave(function(e) { 
    var $target = $(e.target); 
    var group = $target.attr('data-group'); 
    var type = $target.attr('data-type'); 
    groups[group][type] = false; 
    if (!(groups[group].sub || groups[group].main)) { 
     $('.sub[data-group='+ group +']').toggle(false); 
    } 
}); 

Просто отслеживать группу основного и подпункта. Немного уродливый, но надеюсь, что это может помочь.