Question

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

我使用了一个现有的jquery示例，我发现它可以创建上面的jsfiddle，但是我需要在div 'header-outer-blog'上交换背景图像 不在身体标签上。

我是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', '')
})
})

Answer 1

我认为这就是你想要的：

https://jsfiddle.net/32t3n1jo/1/

您必须使用您的div名称替换 body：

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

希望我帮助过。

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

Answer 2

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

试试这个：

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

此处更新了小提琴：https://jsfiddle.net/32t3n1jo/4/

使用jQuery划分背景图像交换

2 个答案: