jquery中的mouseenter和mouseleave函数

我有div盒子。我想当用户悬停它或鼠标输入然后下一个div应该显示，当用户鼠标可见的div应该淡出。我的功能无法正常工作。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

然后是什么问题？ – 2012-07-16 05:31:30

问题在于下一个元素位于目标的正上方，一旦出现它，就会“离开”原始元素并悬停新元素（它再次触发fadeOut） – poncha 2012-07-16 05:34:04

第二个元素在第一个元素上。所以当你用鼠标输入时，它会消失，它会看到一个直接的鼠标，这就是它消失的原因。将第二个元素向下移动300像素，您会看到它的工作原理。

来源

2012-07-16 05:34:00 jeschafe

如果需要显示它在它的位置，然后将这两个包装在另一个容器中，并绑定到该容器上的事件（然后，appers的元素不会触发mouseleave） – poncha 2012-07-16 05:36:17

jquery中的mouseenter和mouseleave函数

回答

相关问题