div의 mouseover/out 자식 요소로 요소가 클리핑됩니다.

Question

div 안에 마우스를 가져 가면서 일부 버튼을 표시하고 싶습니다.

예 here

// HTML

<div id="overdiv"> 
<p>Move your mouse several times on this text to see the bug</p> 
<input type="button" value="hello" class="elements"/> 
</div> 

// CSS

#overdiv {background:#CCC;border:1px solid #FFF;width:300px;height:150px;} 
.elements {display:none;} 

// JS

$('#overdiv').mouseover(function(){$('.elements').fadeIn();}).mouseout(function(){$('.elements').fadeOut();}); 

그것은 작동하지만, 마우스에 다른 요소를 놓을 때 사이드 div 다음 내 버튼이 나타나고 루프에서 사라집니다. (크롬으로 만 테스트했습니다)

그래서, 마우스가 div 안에 있고 한 번 사라지면 마우스가없는 상태에서 버튼을 한 번 표시하는 방법은 무엇입니까?

Answer 1

"mouseover"-Event 대신 "mouseenter"를 사용하십시오.

$('#overdiv').mouseenter(function(){$('.elements').fadeIn();}).mouseleave(function(){$('.elements').fadeOut();}); 

설명 : "로 마우스를"텍스트, 귀하의 "로 마우스를"이벤트가 트리거 그래서 만약 "마우스 오버"와 "로 마우스를"

Answer 2

이 시도 ... 모든 요소와 어린이를위한 트리거 문제를 해결하는 방법 .....

$ ('# overdiv'). 마우스 센터 (function() {$ ('. 요소') .fadeIn();}); $ ('# overdiv'). mouseleave (function() {$ ('요소') .fadeOut();});