Jquery Mouseleave 和 e.target 或 e.relatedTarget

Question

当我从 li.food 移动到 #news-wrap 时，mouseleave 触发。

这不起作用：

$('#news-wrap').hide();
$('li.food').on('mouseenter', function() {
    $('#news-wrap').show();
});
$('li.food').on('mouseleave', function(e) {
    if (!$(e.target).is('#news-wrap')) {
        $('#news-wrap').hide();
    }
});

这也不行：

$('#news-wrap').hide();
$('li.food').on('mouseenter', function() {
    $('#news-wrap').show();
});
$('li.food').on('mouseleave', function(e) {
    if(e.relatedTarget.id != 'news-wrap') $('#news-wrap').hide();    
});

Answer 1

我只是用 CSS 而不是 jquery。

li.food:hover {
 #news-wrap { 
   display : block 
 }
}

查看此 jsfiddle example 作为比较。

Jquery Mouseleave 和 e.target 或 e.relatedTarget

Jquery Mouseleave and e.target or e.relatedTarget

jquery

mouseleave