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-等前缀非常重要，让它可以在所有浏览器中使用。

Answer 2

不需要javascript。您可以使用css过渡轻松实现此目的：

＆＃13;

.bground {
  width: 400px;
  height: 300px;
  background: #aaa url("http://placehold.it/300x200/ffff00") no-repeat top center;
  position: relative;
}

.bground:after {
  content: "";
  background: url("http://placehold.it/300x200/ff0000") no-repeat top center;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

.bground:hover:after {
  visibility: visible;
  opacity: 1;
}

＆＃13;

<div class="bground"></div>

＆＃13;

Answer 3

＆＃13;

app/logs

＆＃13;

var/

＆＃13;

如何在悬停时给出图像淡化效果？

3 个答案: