2012-06-23 2 views
0

로 이동되지 않은 경우 만 나는이 링크를 onmouseout 함수를 호출합니다. 그건 잘 작동합니다. 이제 div (div의 id는 gen_details)를 연 div를 닫는 .mouseout() 이벤트가 필요하지만 커서가 div 자체로 이동하지 않은 경우에만 해당됩니다.jQuery를 커서가 특정 영역

div를 닫는 함수를 작성했습니다 (아래 slideToggle 참조). 커서가 div의 경계 내에 있는지 검사하고, 그렇지 않은 경우에만 코드를 실행하는 조건이 필요합니다.

$('a.itemshow').mouseleave(function() 
     { 
//if(condition here to check if cursor is out of the div's boundaries){ 
     if($('#gen_details').hasClass("open")){ 
      $('#gen_details').slideToggle(300); 
      $('#gen_details').removeClass("open"); 
       return false; 
      } 
//} 
     }); 

복잡하지 않아야하지만 복잡한 해킹 없이는 수행 방법을 알 수 없습니다.

답변

1

일반적으로 마우스가 특정 요소에 들어가면 지워지는 작은 시간 제한으로 해결됩니다. 같은 뭔가 : 같은 타이머 또는 아무것도

var timer; 

$('a.itemshow, #gen_details').on({ 
    mouseenter: function() { 
     clearTimeout(timer); 
     $("#gen_details").slideDown(300); 
    }, 
    mouseleave: function() { 
     timer = setTimeout(hideGen, 200); 
    } 
}); 

function hideGen() { 
    $("#gen_details").slideUp(300); 
} 

FIDDLE

+0

작품 바이올린에 좋은,하지만 내 페이지. 당신은 내가 2 초 후에 div를 열어 놓는 호버링 이벤트를 이미 가지고 있다고 생각한다. mouseleave 이벤트를 추가하면 div에 관계없이 링크를 떠나는 순간 200ms 타임 아웃으로 div가 닫힌다. div. 내가 왜 알아낼 수없는 어떤 이유로 오류를주는 바이올린 시도 : http://jsfiddle.net/5VsMy/ – jovan

0

필요가 없습니다. 마우스 오버 기능을 설정하면 div뿐만 아니라 링크도 선택할 수 있습니다. 따라서 포함 div 위로 마우스를 가져 가면 기본 동작을 수행하고 div 또는 링크에서 이동 한 다음 mouseout 처리기가 호출됩니다. 이는 내가 의미하는 바를 얻지 못하는 것입니다.

바이올린 : http://jsfiddle.net/avukonke/fcSUH/

<a href="www.twitter.com" class="tester"><img src="https://blog.twitter.com/sites/all/themes/gazebo/img/twitter-bird-white-on-blue.png" /></a> 

<div style="width:200px; height: 100px; background-color:black; clear:none;" class="myblock"></div> 
관련 문제