html - 如何在悬停时赋予图像淡入淡出效果？

Question

当我们将鼠标悬停在子 div 上时，如何使父 div 上的淡入淡出悬停变化？我希望悬停具有淡入淡出效果并更改父 div 的背景图像。变化发生得非常快。我希望改变缓慢而顺利地发生。

<script>
		$('#hoverdiv').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})
	</script>

.bground {
  width:100%;
  position:relative;
  background: url(../img/bg1.jpg) no-repeat top center;
}

.bground:after {
	content: url(../img/bg2.jpg);
	width:0;
	height:0;
	display:none;
}

.is-hover {
  background: url(../img/bg2.jpg) no-repeat top center;
}

#hoverdiv
{
	width:auto;
	height:auto;
	margin:0 auto;
	padding:0;
}

<section id="bground" class="bground">
  <div id="hoverdiv">
  <div class="display">
    <img src="img/logo.png" alt="Logo">
  </div>
  <div class="page-scroll">
    <a href="#about" class="btn btn-circle" style="color:#000000">
      <i class="fa fa-angle-double-down animated"></i>
    </a>
  </div>
    </div>
</section>

Answer 1

您正在使用无法减慢速度的 js 添加和删除类。

你可以做的是在css中添加过渡

.is-hover {
  background: url(../img/bg2.jpg) no-repeat top center;
  transition:all ease-in-out 0.3s;
  -moz-transition:all ease-in-out 0.3s;
  -ms-transition:all ease-in-out 0.3s;
  -o-transition:all ease-in-out 0.3s;
  -webkit-transition:all ease-in-out 0.3s;
} 

添加-moz-、-webkit-等前缀是很重要的，这样可以让它在所有浏览器中工作。