jquery의 Mouseenter 및 Mouseleave 기능

div 상자가 있습니다. 사용자가 마우스를 가져 가거나 마우스를 가져 가면 다음 div가 표시되고 사용자 mouseout이 보이는 div가 fadeout해야합니다. 내 기능이 제대로 작동하지 않습니다.jquery의 Mouseenter 및 Mouseleave 기능

<head>  
<script type="text/javascript" src="jquery-1.7.2.js"></script>  
<script type="text/javascript"> 

$(function(){  

    $('.box').bind({    
     mouseenter: function(){     
      $(this).next().fadeIn('fast')    
     },   
     mouseout: function(){ 
      $(this).next().fadeOut('fast')     
     } 


     })  
    })  
</script>  

<style> 

body { margin:0} 
.box { height:300px; width:300px; background:#F00} 

.boxcaption { width:300px; height:300px; background:#00F; position:absolute; left:0; top:0; display:none} 
</style> 
</head> 

<body> 

<div class="wrap"> 

<div class="box"></div> 
<div class="boxcaption"></div> 

</div> 
</body>

출처

2012-07-16 Carlos

그러면 문제는 무엇입니까? –

문제는 다음 요소가 대상 바로 위에 위치하고 일단 나타나면 원래 요소를 "떠나"새 요소를 가리키게됩니다 (다시 fadeOut이 발생 함) – poncha

두 번째 요소는 첫 번째 요소 위에 있습니다. 따라서 마우스 입력을하고 나서 페이드 인하면 즉각적인 마우스 아웃이 발생하여 페이드가 발생합니다. 두 번째 요소를 300 픽셀 아래로 이동하면 효과가 있음을 알 수 있습니다.

출처

2012-07-16 05:34:00 jeschafe

그리고 표시해야하는 경우 그 자리에 다음 두 개의 다른 컨테이너에 래핑하고 해당 컨테이너에 이벤트에 바인딩합니다 (appleer는 mouseleave를 실행하지 않습니다) – poncha

jquery의 Mouseenter 및 Mouseleave 기능

답변

관련 문제