Javascript 使用jQuery交换Div背景图像

在这里拉小提琴

我正在使用jQuery交换div中的一系列背景图像。交换是通过将鼠标悬停在各种文本链接上触发的

我使用了我发现的一个现有jquery示例来创建上面的JSFIDLE，它正在工作，但是我需要在div'header-outer-blog'上交换背景图像，而不是在body标记上

我是js新手，所以我发现很难修改代码来适应

如何使背景图像交换发生在div而不是主体上

提前谢谢

jQuery(function(){
var $body = $('body');
$('.link-1').hover(function(){
    $body.css('background-image', 'url("http://placehold.it/10")')
}, function() {
    $body.css('background-image', '')
})
})

jQuery(function(){
var $body = $('body');
$('.link-2').hover(function(){
    $body.css('background-image', 'url("http://placehold.it/50")')
}, function() {
    $body.css('background-image', '')
})
})

jQuery(function(){
var $body = $('body');
$('.link-3').hover(function(){
    $body.css('background-image', 'url("http://placehold.it/100")')
}, function() {
    $body.css('background-image', '')
})
})

jQuery(function(){
var $body = $('body');
$('.link-4').hover(function(){
    $body.css('background-image', 'url("http://placehold.it/200")')
}, function() {
    $body.css('background-image', '')
})
})

---

我想这就是你想要的：

您只需将

主体

替换为您的div名称：

jQuery(function(){
    var $body = $('.header-outer-blog');
    $('.link-1').hover(function(){
        $body.css('background-image', 'url("http://placehold.it/10")')
    }, function() {
        $body.css('background-image', '')
    })
})

希望我能帮忙

---

---

使用不同的功能组织方式更新了：

您的背景色妨碍了图像的显示

试试这个：

jQuery(function(){
    initBackground('.link-1', '10');
    initBackground('.link-2', '50');
    initBackground('.link-3', '100');
    initBackground('.link-4', '200');
    initBackground('.link-5', '300');
    initBackground('.link-6', '200');
})

function initBackground(linkclass, image) {
    var $div = $('.header-outer-blog');
    $(linkclass).hover(function(){
        $div.css('background-image', 'url("http://placehold.it/' + image + '")');
        $div.css('background-color', 'transparent');
    }, function() {
        $div.css('background-image', '')
        $div.css('background-color', '#232328');
    });
}

---

更新的fiddle:

感谢更新的fiddle-但背景图像似乎无法工作/加载。我认为初始URL缺少扩展名？也许吧，jpg？dunno:）发现了问题。。是的，这正是我所需要的，谢谢。有没有一种更简洁的方法来组合js中的各个功能？或者他们需要分开吗？请考虑投票的答案。关于功能，虽然没有太大的改进，但我认为你可以这样做