jQuery 마우스가 특정 요소를 숨기지 않고 출력합니다.

Question

두 요소가 있습니다. 특정 div의 발생을 야기하는 앵커입니다. 내가 부모 컨테이너에이 두 가지를 포장 할 수 아니에요 그 하나의 경우 , 따라서 전체 마크 업으로 다음과 같은 수 있습니다

<a href="#" class="trigger">click me</a> 
<div class="info">info displayed on trigger hover</a> 

아주 기본적인 질문은 : 마우스가 트리거 잎 I 커서가 위에 있지 않으면 정보창을 숨기고 싶습니다. 어떻게하면됩니까?

도움말 평가, 관련

Answer 1

전혀 마크 업을 변경할 수 없다면, 당신은 그것에게 좋은 페이드 효과를 줄 수 있고, 페이드 인스턴트없는 사실을 이용,이 같은 일이 것 가지고 모든 .trigger/.info 쌍을 처리 :

$(".trigger, .info").hover(function() { 
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 1 }); 
}, function() { 
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 0 }); 
});​​​​​​ 

You can try a demo here

, 당신은 .info에 대한 .trigger 한이 정보를 하나 개의 기능을 깰 수, 난 그냥 좀 더 간결한를 유지했다. 이 ( .animate()를 통해) 페이드 아웃 mouseleave에, 그것은 페이드 mouseenter에

이

$(".trigger, .info").hover(function() { 
    $(this).next().stop().animate({opacity: 1 }); 
}, function() { 
    $(this).next().stop().animate({opacity: 0 }); 
}); 
$(".info").hover(function() { 
    $(this).stop().animate({opacity: 1 }); 
}, function() { 
    $(this).stop().animate({opacity: 0 }); 
}); 

어떤이가하는 것은 ... 그러나 다른 하나에서 마우스를 이동하면 페이드를 드릴 것입니다 : 두 가지 기능 버전은 like this을 보일 것이다 .stop()을 페이드 아웃하기 전에 1 프레임 동안 발생하고 다시 페이드 인합니다. 사용자에게 아무 일도 일어나지 않으면 마우스가 둘 다 떠났을 때 페이드를 계속할 수 있습니다.

Answer 2

$('.trigger').live('mouseout',function (event) { 
    if (!$(event.relatedTarget).is('.info')) 
     $(this).next().hide(); 
});