Question

我发现以下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;
}

Answer 1

您可以保留所拥有的内容，但在将背景设置为链接的网址之前，请使用当前背景网址向父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'));
});

我没有对此进行过测试，但它应该有效。

Answer 2

如果你真的需要用JS做这个，你可以使用像这样的悬停函数：

<强> Working Example 1

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

API documentation for .hover()

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

<强> Working Example 2

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

MDN documentation for :hover

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

2 个答案: