如何在鼠标退出时删除 JS 悬停功能

How can I remove a JS hover function on mouseout?

本文关键字：删除 JS 悬停 功能 退出 鼠标      更新时间：2023-09-26

我找到了以下 js 代码，通过子div 中的链接交换父div 的背景，但悬停状态保持不变，而不是在鼠标退出时返回到原始状态。谁能帮我调整代码以在鼠标离开链接后返回父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 添加一个数据属性。 然后绑定到鼠标退出事件并将其重新设置，如下所示：

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'));
});

我还没有测试过这个，但它应该可以工作。

如果你真的需要使用JS来做到这一点，你可以使用这样的悬停函数：

工作示例 1 

$('#navBar').hover(function () {
    $('#navBar').css({
        'backgroundImage': 'url( --- )' // image 2
    });
},
function () {
    $('#navBar').css({
        'backgroundImage': 'url( --- )' // image 1
    });
});

.hover()的 API 文档

但正如SLaks在评论中提到的，首选的方法可能是只使用CSS :hover如下所示：

工作示例 2

#navBar {
    height: 38px;
    width: 100%;
    background-image: url( --- ); /* image 1 */
    background-size:20px;
}
#navBar:hover{
    background-image: url( --- ); /* image 2 */
}

:hover的 MDN 文档

相关文章：