悬停按钮上显示叠加

Question

当我将鼠标悬停在按钮上时，我想尝试制作叠加层，我希望当鼠标离开按钮时，叠加层会回到0不透明度，我怎么能轻松实现效果呢？

这是我的代码：

＆＃13;

＆＃13;

		
$('#hand').mouseover(function(){
	$('.overlay').animate({opacity:0.5}, 100);
});	

＆＃13;

.content {
	position:absolute;
	width:100%;
	height:100%;
}

#hand{
	position:absolute;
	width:200px;
	height:200px;
	top:60%;
	left:55%;
	margin-left:-80px;
	margin-top:-100px;
	z-index:2;
}

.overlay{
	position:absolute;
	background:black;
	width:100%;
	height:100%;
	opacity:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
<div class="overlay"></div>
<button id="hand">PRESS</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我正确阅读了问题，您只需要为mouseout添加另一个事件来重置叠加层：

$('#hand').mouseover(function() {
  $('.overlay').animate({
    opacity: 0.5,
  }, 100);
}).mouseout(function() {
  $('.overlay').animate({
    opacity: 0,
  }, 100);
});

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}
#hand {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60%;
  left: 55%;
  margin-left: -80px;
  margin-top: -100px;
  z-index: 2;
}
.overlay {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
  <div class="overlay"></div>
  <button id="hand">PRESS</button>
</div>

那就是说，你也可以在CSS中完成这个：

html,
body,
#mask {
  height: 100%;
  width: 100%;
  margin: 0;
  position: relative;
}
button {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}
#mask {
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 100ms;
}
button:hover+#mask {
  opacity: .5;
}

<button>BUTTON</button>
<div id='mask'></div>