悬停时淡入淡出背景图像

【问题标题】：Fade in and out background image on hover悬停时淡入淡出背景图像
【发布时间】：2016-02-29 18:36:26
【问题描述】：

我有一些脚本可以让我将鼠标悬停在后代上并向祖先添加一个类，我想知道向元素添加淡入淡出的代码是什么。悬停 li.icon_bg1 将类 bg_change 添加到 .parallax_bg。并且在我的 css bg_change 中有一个我更改的背景图像

$('.parallax_bg .row .col-md-6 .activity .top_row li.icon_bg1').hover(function(){
    $(this).parents(".parallax_bg").addClass('bg_change');
}, function() {
    $(this).parents(".parallax_bg").removeClass('bg_change');
})

【问题讨论】：

这段代码有什么问题？
如果你想知道如何在 JQuery 中淡入，那就是$(this).fadeIn(/*Time in milliseconds*/ 1000);
代码没什么问题，只是想在里面加个淡入淡出
你能提供一个小提琴吗？
jsfiddle.net/xaLn1z32 这是小提琴。基本上我想要发生的事情是淡入另一个图像并在它进出悬停时淡出，而不是像进出悬停那样进行硬切

标签： jquery hover fade

【解决方案1】：

您可以使用 jQuery 内置的 fadeIn() 函数，也可以简单地在要添加/删除的类上添加淡入淡出过渡。

.parallax_bg {
  transition: opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}

.parallax_bg.bg_change {
  opacity: 1;
  visibility: visible;
}

编辑

我误解了你的问题。阅读您的回复后，您只需将 transition: background-image 0.5s; 添加到您的 .parallax_bg 类中即可。

.parallax_bg {
  transition: background-image 0.5s;
  background-image: url(corgi-img.jpg);
}

【讨论】：

谢谢，但不完全是我想要的 jsfiddle.net/xaLn1z32 这里是小提琴。基本上我想要发生的事情是淡入另一个图像并在它进出悬停时淡出，而不是像进出悬停那样进行硬切
Fiddle 比什么都有用，下次你应该从它开始。我编辑的回复应该正是您所需要的。