javascript - 反向悬停 DIVS 时显示错误背景图像的功能

Question

当您将鼠标悬停在 6 列中的 1 列上时，我使用 jQuery 更改 DIV 的背景图像(每次将鼠标悬停在每一列上时图像都会更改)，对于我得到此工作的大多数帖子:

$('.content1').hover(function() {
    $('.services-hover').animate({opacity: 0}, 0).css({'background-image': "url(http://aliensix.com/services-websites.jpg)"}).animate({opacity: 1}, 500)
}, function() {
    $('.services-hover').animate({opacity: 0}, 0).css({'background-image': "url(http://aliensix.com/services-apps.jpg)"}).animate({opacity: 1}, 500)
});

$('.content2').hover(function() {
    $('.services-hover').animate({opacity: 0}, 0).css({'background-image': "url(http://aliensix.com/services-photos.jpg)"}).animate({opacity: 1}, 500)
}, function() {
    $('.services-hover').animate({opacity: 0}, 0).css({'background-image': "url(http://aliensix.com/services-icons.jpg)"}).animate({opacity: 1}, 500)
});

$('.content3').hover(function() {
    $('.services-hover').animate({opacity: 0}, 0).css({'background-image': "url(http://aliensix.com/services-support.jpg)"}).animate({opacity: 1}, 500)
}, function() {
    $('.services-hover').animate({opacity: 0}, 0).css({'background-image': "url(http://aliensix.com/services-audio.jpg)"}).animate({opacity: 1}, 500)
});

但我有两个问题，首先，当您第一次将鼠标悬停在每个 div 上时，背景会在图像出现之前闪烁，这只发生在您第一次悬停时。

我最大的问题是，如果您向后浏览每个 div 并将鼠标悬停在其上，则会显示错误的图像，我相信这种情况只会发生在“应用程序”和“图标”上。我需要 6 个处理程序而不是 3 个吗？

我已经设置了一个显示此问题的 fiddle :https://jsfiddle.net/hqa8k0ze/6/

有没有一种“更干净”的方式可以做到这一点，而不会出现问题？

Answer 1

为什么不直接在 CSS body 元素中设置默认背景，然后让每个 div 在鼠标进入该列时显示它自己的图像。本质上只是用新背景覆盖默认背景，而不是将默认不透明度设为 0。它可能会闪烁，因为您在引入新图像之前将背景的不透明度更改为 0。