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

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

我最大的问题是，如果你向后浏览每个div并将鼠标悬停在它上面，则会显示错误的图像，我相信这只会发生在＆＃34; apps＆＃34;和＆＃34;图标＆＃34;。我需要有6个处理程序而不是3个处理程序吗？

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

是否有＆＃34;清洁剂＆＃34;我可以做到这一点，没有问题吗？

Answer 1

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

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

1 个答案: