Jquery는 호버에 숨어있는 요소를 방지합니다. 마우스 오버시 clearTimeout, mousemove의 setTimeout

Question

마우스 커서가 움직이지 않을 때 사이드 바를 유지하려고하는데 두 개의 탐색 버튼이 지연되어 숨어있었습니다. 마우스 커서가 다시 움직이면 요소가 나타납니다. 코드는 정상적으로 작동하지만 ... 3 개의 요소가 가리키고있을 때 숨기는 것을 방지하는 방법.

어디에서 hover 상태로 clearTimeout을 추가해야합니까? 해야합니까? Sory 저는 jQuery에서 초보자입니다.

HTML :

<div class="container"> 
<nav> 
    <ul> 
     <li><a href="#">something</a></li> 
    </ul> 
</nav> 
<div class="prev">prev</div> 
<div class="next">next</div> 
</div> 

CSS

.container { position: absolute; left: 20px; top: 2px; right:2px; bottom: 20px; border: 1px solid red; } 
nav { position: absolute; left: 0; top:0; bottom: 0; border: 1px solid blue; } 
.prev { position: absolute; width: 50px; height: 30px; bottom: 0; left: 45%; border: 1px solid green; } 
.next { position: absolute; width: 50px; height: 30px; top: 0; left: 45%; border: 1px solid green; } 

JS

var timeout = false; 
var count = $(function() { 
$('.container').mousemove(function(e) { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     console.log('hide slideshow elements'); 
     $('.container nav').fadeOut(); 
     $('.prev').fadeOut(); 
     $('.next').fadeOut(); 
    }, 2500);    
}); 
}); 

$(".container").mousemove(function() { 
console.log('show slideshow elements'); 
$('.container nav').fadeIn(); 
$('.prev').fadeIn(); 
$('.next').fadeIn(); 
}); 

그리고 JSfiddle

012 여기

내 코드입니다

http://jsfiddle.net/h3wDt/3/

Answer 1

3,516,나는 그것이 최선의 방법이 될 수 없습니다, 그것은 탐색 이상 여부를 저장하는 hover 변수를 추가 할 수 있지만 내가 이벤트 대상이 있는지 TAGNAME 확인

http://jsfiddle.net/h3wDt/5/

Answer 2

일이 앵커 태그 였어. 뿐만 아니라 효과가있는 것으로 보인다.

var timeout = false; 
var count = $(function() { 
    $('.container').mousemove(function(e) { 
     $('.container nav').fadeIn(); 
     $('.prev').fadeIn(); 
     $('.next').fadeIn(); 
     clearTimeout(timeout); 
     if (e.target.tagName != "A") { 
      timeout = setTimeout(function() { 
       console.log('hide slideshow elements'); 
       $('.container nav').fadeOut(); 
       $('.prev').fadeOut(); 
       $('.next').fadeOut(); 
      }, 2500);    
     } 
    }); 
}); 

JS Fiddle