0

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

2 回答 2

0

您可以保留您所拥有的，但在将背景设置为链接的 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'));
});

我没有对此进行测试，但它应该可以工作。

于 2013-09-11T20:29:14.503 回答
0

如果你真的需要用 JS 来做这件事，你可以像这样使用悬停功能：

工作示例 1

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

API 文档.hover()

但正如 SLaks 在评论中提到的，首选的方法可能是:hover像这样使用 CSS：

工作示例 2

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

MDN 文档:hover

于 2013-09-11T21:09:36.330 回答