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函數

回答

相關問題