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上，我不希望.books-online-shop-submenu滑动。

我按照我在SO上找到的另一个答案尝试了以下操作，但它不起作用：

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

Answer 1

您可以使用 event.stopPropagation() ：

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

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

Answer 2

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

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

Answer 3

怎么样

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();
    }
});

Answer 4

尝试

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

触发mouseleave但不会触发特定元素

4 个答案: