Jquery Mouseleave und e.target oder e.relatedTarget

Question

Wenn ich von li.food zu # News-Wrap verschiebe, lösche mouseleave.

funktioniert das nicht:

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

auch nicht dies:

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

Ich benutzte CSS nur statt jquery.

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

Siehe jsfiddle example als Vergleich.