한 요소에서 마우스를 움직이는 방법

Question

나는 멍청한 녀석 jQuery입니다.이 마우스가 다른 요소를 떠날 때 마우스가 한 요소에 마우스를 올리는 것을 이해하고 싶습니다.이

<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 요소를 떠날 때 알고 어떻게 그것에 대해 말해 입니다

HTML :

나는이 코드를 작성 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; 
}); 

당신이 리 태그에 이벤트를 첨부 있기 때문에 약간의 결함이 http://jsfiddle.net/krasimir/cWn65/1/

위의 코드와 JS 바이올린입니다. ul에있는 것이 더 좋지 않습니까?