在jQuery中使用mouseover和mouseout，沒有給出預期的輸出

我有2個div元素，我打開2nd div元素的第一個div元素的mouseover甚至關閉它在mouseout上。代碼如下。在jQuery中使用mouseover和mouseout，沒有給出預期的輸出

jQuery('.something').on('mouseover', function() { 
 
    jQuery(jQuery(this).next('div')).slideDown(); 
 
}) 
 

 
jQuery('.something').on('mouseout', function() { 
 
    jQuery(jQuery(this).next('div')).slideUp(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="something" style="background:red; height:200px; width:200px"> 
 
</div> 
 
<div class="something1" style="background:#000; height:200px; width:200px; position:absolute; top: 0; display: none;"> 
 
</div>

問題是懸停在元素時，如果將光標移動哪怕是一點點，它執行鼠標懸停及移出事件。

Here is fiddle

來源

2017-10-04 Sandeep Pujare

並且也建議使用'mouseenter'和'mouseleave'事件。 – lshettyl

您可以使用pointer-events: none;

.something1 { 
    pointer-events: none; 
}

來源

2017-10-04 12:33:26 ShadowFoOrm

感謝ShadowFoOrm。有效。 –

@SandeepPujare記得標記爲接受，如果你接受答案，以便其他人可以知道這是一個很好的答案; – ShadowFoOrm

它發生是因爲mouseover情況下，如果你使用互動鼠標將繼續處理同一事件。

這就是爲什麼pointer-events

jQuery('.something').on('mouseover', function() { 
 
    jQuery(jQuery(this).next('div')).slideDown(); 
 
}) 
 

 
jQuery('.something').on('mouseout', function() { 
 
    jQuery(jQuery(this).next('div')).slideUp(); 
 
})

.something1 { 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="something" style="background:red; height:200px; width:200px"> 
 
</div> 
 
<div class="something1" style="background:#000; height:200px; width:200px; position:absolute; top: 0; display: none;"> 
 
</div>

來源

2017-10-04 12:39:45 bhansa

在jQuery中使用mouseover和mouseout，沒有給出預期的輸出

回答

相關問題