2013-03-01 2 views
1

좋아요. #nav div 외부를 클릭하면 아래 코드가 정상적으로 작동합니다. #nav div에서 마우스를 움직여 사라지게 할 수 있는지 묻는 중입니다. div를 숨기려면 '클릭'하고 싶지 않습니다.Jquery 마우스 이벤트 대체

$(document).mouseup(function (e) 
    { 
     var container = $("#nav"); 

     if (container.has(e.target).length === 0) 
     { 
      container.hide(); 
     } 
    }); 

Example은 내가 mouseenter 및 mouseleav을 시도,하지만 그들은 작동하지 않습니다. Example 어떤 도움을 주시면 감사합니다 :)

+0

당신은 관련 요소에 이벤트 처리기를 바인딩 할 필요가 없습니다'$ (문서)'. – Pointy

+0

또한'mouseover'와'mouseout'을 시도하십시오 –

+0

mouseenter와 mouseleave는 저에게 효과가있는 것처럼 보입니다. 문제가 무엇입니까? – howderek

답변

4

이 시도 :

$(document).ready(function(){ 
    $("#logo").mouseover(function() { $("#nav").fadeIn("slow"); }); 

    $("#nav").mouseleave(function (e){ 
     $(this).fadeOut("slow"); 
    }); 
}); 
1

당신은 당신이

$(document).ready(function(){ 
$("#logo").mouseenter(function() { $("#nav").fadeIn("slow"); }); 
}); 

$("#nav").mouseleave(function (e) 
{ 
     $("#nav").fadeOut('fast'); 
}); 

http://jsfiddle.net/sKpwV/6/

아래 링크를 확인을 위해 내가 그것을 추가 한 탐색에하는 MouseLeave 필요

드롭 다운 메뉴를 만들려면 여기를 클릭하십시오. http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 드롭 다운 메뉴가 표시됩니다. 순수한 CSS이므로 사용자가 Javascript를 사용할 수없는 경우에도 작동합니다.

1

nav div와 logo div 사이의 여백에 문제가 있습니다. 사용자가 해당 영역 사이에서 마우스를 이동하고 nav div에 mouseout 이벤트를 엄격하게 설정하면 창이 닫힙니다. 해결책은 작은 시간 제한을 추가하여 사용자가 메뉴를 탐색하기 전에 메뉴를 탐색 할 수있는 시간을 허용하는 것입니다. 이렇게하면 사용자가 실수로 탐색 가장자리에 마우스를 놓고 div 외부에있는 픽셀 또는 두 개의 다른 경우를 피할 수 있습니다.

는 여기에 내가이 문제를 해결하는 데 사용되는 jQuery를 수 있습니다 :

$('#nav').mouseover(function() { 
    clearTimeout($.data(this, 'mouseOutTimer')); 
}); 
$('#nav').mouseout(function() { 
    clearTimeout($.data(this, 'mouseOutTimer')); 
    $.data(this, 'mouseOutTimer', setTimeout(function() { 
     $("#nav").hide(); 
    }, 700)); 
}); 

http://jsfiddle.net/HyUEu/

관련 문제