2014-11-26 8 views
1

나는 <div class="lewy">과 많은 다른 div들을 가지고 있습니다. div를 "lewy"로 가져 가면 jQuery 함수가 작동하지만 중첩 된 div에 포인터를 놓을 때 포인터가 움직이지 않습니다. 어떻게 작동시킬 수 있습니까?중첩 된 요소의 호버 기능

이 동작을 모든 내부 div에 구현하고 싶습니다.

$(".lewy").hover(function() { 
    $(".lewy").animate({width: 600}, 100); 
}); 

$(".lewy").mouseout(function() { 
    $(".lewy").animate({width: 300}, 50); 
}); 
+0

사용중인 HTML을 공유 할 수 있습니까? –

+2

대신'mouseenter' 또는'mouseleave'를 사용하십시오 .. –

답변

4

mouseenter eventmouseleave event 정확하게이 시나리오 구성된다.

$(".lewy").mouseenter(function() { 
    $(".lewy").animate({width: 600}, 100); 
}); 
$(".lewy").mouseleave(function() { 
    $(".lewy").animate({width: 300}, 50); 
}); 

사이드 노트 : 동일한 요소에 적용될 때 메소드를 연결할 수 있습니다. 둘 이상의 요소에 적용되는 경우 $('.lewy') 대신 $(this)을 처리기에서 사용하고 싶을 것입니다 (그렇지 않으면 더 빠르고 더 간단하고 유지하기 쉽기 때문입니다). 일반적으로 대기중인 애니메이션을 시작하기 전에 이전 애니메이션을 중단하고 싶습니다.

$(".lewy").mouseenter(function() { 
    $(this).stop().animate({width: 600}, 100); 
}).mouseleave(function() { 
    $(this).stop().animate({width: 300}, 50); 
}); 
+0

대단히 감사합니다. – user3898993