javascript - 如何在mouseout上删除JS悬停功能？

我发现以下js代码通过子div中的链接交换父div的背景，但是在mouseout上，悬停状态保持不变，而不是返回原始状态。有人可以帮我调整代码，以将鼠标移出链接后返回父div的背景吗？先感谢您。

    $('.background-changer').on('mouseover', 'a', function () {

    var background = "url('" + $(this).attr('data-background') + "')";

    $('.background-changer').css('background-image', background)
});

});


    <div id="navBar" style="background: url(images/navigation-background-0.gif);" class="background-changer">
                <div id="navBarCell1"><a href="#" title="Resort" target="_parent" data-background="images/navigation-background-1.gif">Resort</a></div>
</div>

#navBar {
    height: 38px;
    width: 760px;
    float: right;
    background-repeat: no-repeat;
}
#navBarCell1 {
    float: left;
    width: 75px;
    text-align: center;
    height: 26px;
    overflow: hidden;
    margin: 0px;
    padding-top: 9px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#navBarCell1 a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-transform: lowercase;
    color: #000;
    text-align: center;
    text-decoration: none;
    padding: 20px;
    margin-top: 10px;
}

最佳答案

您可以保留现有内容，但是在将背景设置为链接的URL之前，请使用当前背景URL将数据属性添加到父div。然后绑定到mouseout事件并将其设置回如下：

var bgChanger = $('.background-changer');
bgChanger.on('mouseenter', 'a', function () {
var background = "url('" + $(this).attr('data-background') + "')";

bgChanger.data('original-background', bgChanger.css('background-image')).css('background-image', background);
}

bgChanger.on('mouseout', function(){
  bgChanger.css('background-image', bgChanger.data('originalBackground'));
});

我还没有测试过，但是应该可以。

关于javascript - 如何在mouseout上删除JS悬停功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18750526/