在懸停時淡入和淡出背景圖像

Question

我有一些腳本可以讓我將鼠標懸停在一個后代上，並向祖先添加一個類，想知道向元素添加一個fadein的代碼是什么。 懸停li.icon_bg1將類bg_change添加到.parallax_bg。 並且在我的css bg_c​​hange中有一個背景圖像，我可以更改

$('.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;
}

編輯

我誤解了你的問題。 閱讀您的回復后，您需要添加的只是transition: background-image 0.5s; 到您的.parallax_bg類。

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