Как проверить наведите указатель мыши на один элемент

Question

Я нобом в jQuery, и я хочу понять, что, как знать, что моя мышь наводится на один элемент, когда эта мышь оставляет другой элемент.

Я пишу этот код:

HTML

<ul> 
    <li class="conver">1</li> 
    <li class="conver">2</li> 
    <li class="conver">3</li> 
    <li class="conver">4</li> 
    <li class="conver">5</li> 
</ul> 
<div id="center">JSFIDDLE</div> 

JQuery

$('ul').on('mouseenter','li', function() { 
     $('#center').fadeIn('fast'); 

}).on('mouseleave','li', function() { 
    //I want when mouse leave this element if mouse doesn't hover on ('#center') 
    //element so hide ('#center') element but if to be hover on it this div keep on 
    //and don't hide 
     $('#center').stop().fadeOut('fast'); 
}); 

теперь скажите мне об этом, что, как я знаю, когда мышь оставить li элемент является on ('#center') или не !!!

Answer 1

Попробуйте

timerId = null; 
$('ul').on('mouseenter','li', function() { 
     $('#center').fadeIn('fast'); 

}).on('mouseleave','li', function() { 
    //I want when mouse leave this element if mouse doesn't hover on ('#center') 
    //element so hide ('#center') element but if to be hover on it this div keep on 
    //and don't hide 
    timerId = setTimeout(function(){ 
        $('#center').stop().fadeOut('fast'); 
       }, 500); 

}); 

$('#center').on('mouseenter', function(){ 
    if(timerId){ 
     cleatTimeout(timerId); 
     timerId = null; 
    } 
}); 

Answer 2

Я думаю, что это будет работать. Имейте в виду, что рекомендуется кэшировать выбранные объекты jquery. Например, $ ('# center') используется несколько раз в вашем коде.

var center = $('#center'); 
var ul = $('ul'); 
var isMouseOnCenter = false; 
ul.on("mouseenter", function() { 
    center.stop().fadeIn('fast'); 
}).on("mouseleave", function() { 
    isMouseOnCenter = false; 
    setTimeout(function() { 
     if(!isMouseOnCenter) 
      center.stop().fadeOut('fast'); 
    }, 300);  
}); 
center.on("mouseenter", function() { 
    isMouseOnCenter = true; 
}); 

Вот JS скрипку с выше http://jsfiddle.net/krasimir/cWn65/1/

кода Также есть небольшой глюк, потому что вы прикрепить событие на Li тега. Разве не лучше быть на ul.