反向悬停 DIVS 时显示错误背景图像的函数

Function displaying wrong background images when hovering DIVS in reverse

本文关键字：背景 图像 函数 错误 显示 悬停 DIVS      更新时间：2023-09-26
当您

将鼠标悬停在 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 个吗？

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

有没有一种"更干净"的方法可以做到这一点，而没有问题？

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

相关文章：