Timmy Von Heiss Timmy Von Heiss - 7 months ago 38
Javascript Question

Jquery Mouseleave and e.target or e.relatedTarget

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

I just used CSS instead of jquery.

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

See this jsfiddle example as comparison.

Comments