隱藏當不再徘徊使用jQuery

Question

我想懸停在按鈕#reloadButton當DIV #reloadWarningBackground只顯示。

這裏是我的代碼：

$('#reloadButton').mouseover(function() { 
    $('#reloadWarningBackground').show(); 
}); 

Answer 1

使用mouseout像以下。

$('#reloadButton').mouseover(function() { 
    $('#reloadWarningBackground').show(); 
}).mouseout(function() { 
    $('#reloadWarningBackground').hide(); 
}) 

UPDATE

這是更好地使用mouseenter因爲mouseover將被重複執行。

$('#reloadButton').mouseenter(function() { 
    $('#reloadWarningBackground').show(); 
}).mouseleave(function() { 
    $('#reloadWarningBackground').hide(); 
}) 

Answer 2

解決此問題的最簡單和最好的方法是使用toggle（）。

// HTML

<button id="reloadButton"> 
    Hover me 
</button> 
<div id="reloadWarningBackground" style="display:none;"> 
    <p> 
     Hello this is me 
    </p> 
</div> 

//使用Javascript

$('#reloadButton').hover(function() { 
    $('#reloadWarningBackground').toggle(); 
}); 

fiddle