마우스를 쥐고있을 때 요소를 표시하는 방법

Question

ul과 많은 li이 있습니다. 나는 어떤 마우스를에 3 초 동안 누르고 있으면 한 div를 표시하고 div에서 hide라는이 요소로부터 마우스를 떠날 때를 원한다. 나는 구글에서 많은 검색을하고 나는 fadeIn과 fadeOut을 사용해야한다는 것을 알고 있지만 어떻게 사용하는지 모르겠다. 도 클릭하면 li을 알려주고 싶습니다. 너무 혼란 스럽기 때문에 저를 안내해주십시오.

덕분에 많은

이 내 코드입니다 : HTML :

<ul id="friend-list"> 
     <li id="1"></li> 
     <li id="2"></li> 
     <li id="3"></li> 
     <li id="4"></li> 
     <li id="5"></li> 
     <li id="6"></li> 
</ul> 

jQuery를 :

$(document).on('mouseover','#friend-list li',function(){ 
    $('#center-side').fadeIn('slow'); 
}); 
$(document).on('mouseout','#friend-list li',function(){ 
    $('#center-side').stop().fadeOut('slow'); 
}); 

$(document).on('click','#friend-list li',function(){ 
    alert('aaaaaaaaa'); 
}); 

Answer 1

당신은이를 사용할 수 있습니다

     var timer = null; 
         $('#friend-list li').hover(function() { 
          var $el = $('#center-side'); 
          clearTimeout(timer); 
          timer = setTimeout(function() { 
           $el.css('display','block'); 
          }, 1500); 
         }, function() { 
          clearTimeout(timer); 
          timer = setTimeout(function() { 
           $('#center-side').css('display','none'); 
          }, 10); 

         }); 

Answer 2

$("li.foo").mouseover(function() 
{ 
    $("div.foo").show(100); 
}.mouseout(function() 
{ 
    $("div.foo").hide(100); 
}.click(function() 
{ 
    alert("Clicked"); 
}); 

Answer 3

당신은 setTimeout()을 사용할 수 있습니다

jQuery를

var tOut; 

$('ul').on('mouseover', 'li', function() { 
    tOut = setTimeout(function() { 
     $('div').show(); 
    }, 3000); 
}).on('mouseout', 'li', function() { 
    clearTimeout(tOut); 
    $('div').hide(); 
}).on('click','li',function(){ 
    alert("aaaaaaaaa"); 
}); 

HTML

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>1</li> 
    <li>2</li> 
</ul> 
<div>show and hide me</div> 

DEMO

Answer 4

jQuery를 -> mousedown

$(".element").mousedown(function(){ 
    alert("Success"); 
}); 

사용자가 요소를 클릭하면 코드가 실행됩니다. Mouseup -> 클릭을 아래로 두십시오.

http://api.jquery.com/mousedown/

$(".element").mouseenter(function(){ 
    alert("Enter"); 
}).mouseleave(function(){ 
    alert("Leave"); 
}); 

Whis 클릭, 커서가 객체 주위를 비행하기 바로 경우 코드를하지 실행

.

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/