Question

我希望div #reloadWarningBackground仅在将鼠标悬停在按钮#reloadButton上时显示。

这是我的代码：

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

Answer 1

使用mouseout，如下所示。

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

<强>更新

最好使用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

不再使用jQuery时悬停时隐藏

2 个答案: