트리거 mouseleave하지만 특정 요소 이상인 경우

Question

커서가 특정 요소 위에 있는지 여부에 따라 요소가 나타나거나 사라집니다.

커서가 나타나거나 사라지는 요소 위에 커서를 놓으면 사라지지 않게하고 싶습니다.

그래서 나는이 있습니다

$('.main-menu ul li.last').mouseenter(function() { 
    $('.books-online-shop-submenu').slideDown(); 
}); 

$('.main-menu ul li.last, .books-online-shop-submenu').mouseleave(function() { 
    $('.books-online-shop-submenu').slideUp(); 
}); 

를하지만 커서가 IT를 초과하면 나는 slideUp에 .books-online-shop-submenu를 원하지 않는다.

는 나는 내가 SO에 발견 다른 답변에 따라 다음과 같은 시도했지만 작동하지 않습니다 :

$('.main-menu ul li.last').not('.books-online-shop-submenu').mouseleave(function() { 
    $('.books-online-shop-submenu').slideDown(); 
}); 

Answer 1

시도하는 방법

jQuery(function ($) { 
    var $target = $('.books-online-shop-submenu'), 
     timer; 
    $('.main-menu ul li.last').hover(function() { 
     clearTimeout(timer); 
     $target.stop(true, true).slideDown(500); 
    }, function() { 
     timer = setTimeout(function() { 
      $target.stop(true, true).slideUp(); 
     }, 200); 
    }); 

    $target.hover(function() { 
     clearTimeout(timer); 
    }, function() { 
     $target.stop(true, true).slideUp(); 
    }); 
}); 

데모 : Fiddle

Answer 2

당신은 event.stopPropagation() 사용할 수 있습니다

가 버블 링에서 이벤트를 방지 DOM 트리를 사용하여 모든 부모 처리기가 이벤트를 알리지 못하도록합니다 ( ).

$('.books-online-shop-submenu').mouseenter(function(event) { 
    event.stopPropagation(); 
}); 

Answer 3

$('selector').mouseover(function() { 
    $('selector').slideDown(); 
}); 

$('selector').mouseout(function() { 
    $('selector').slideUp(); 
}); 

Answer 4

에 대한

var inBookSubMenu = false; 
$('.books-online-shop-submenu').mouseenter(function() { 
    inBookSubMenu = true; 
}).mouseleave(function() { 
    inBookSubMenu = false; 
}); 

$('.main-menu ul li.last').mouseenter(function() { 
    $('.books-online-shop-submenu').slideDown(); 
}).mouseleave(function() { 
    if (!inBookSubMenu) { 
     $('.books-online-shop-submenu').slideUp(); 
    } 
});