Jquery Mouseleave and e.target or e.relatedTarget

Question

When I move from li.food to #news-wrap, mouseleave fires.

This does not work:

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

Nor does this:

$('#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

I just used CSS instead of jquery.

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

See this jsfiddle example as comparison.