在悬停时淡入淡出背景图像

Question

我有一些脚本可以让我将鼠标悬停在一个后代上并向祖先添加一个类，我想知道将fadein添加到元素的代码是什么。悬停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');
})

Answer 1

您可以使用jQuery内置的fadeIn（）函数，或者只需在要添加/删除的类中添加淡入淡出过渡。

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

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

修改

我误解了你的问题。阅读完回复后，您需要为.parallax_bg课程添加transition: background-image 0.5s;。

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