将鼠标悬停在图片上会隐藏“在此处注册”链接

Question

当我将鼠标悬停在图像上时，我的REGISTER HERE链接将被隐藏。

我不希望悬停效果，但我希望链接位于图像下方的相同位置。

.image {
	position:relative;
	display:inline-block;
	margin:10px;
}
.overlay {
	display:none;
}
.image:hover .overlay {
	width:100%;
	height:100%;
	background:rgba(0,0,0,.5);
	border:10px solid red;
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	text-align:center;
	color:white;
	padding:12px;
	font-size:20px;
}
img {
	vertical-align:top;
}

<a href="#" class="course">
<div class="image">
	<figure>
	<img  src="http://placekitten.com/250/200"  width="100%" height:"100%">			
 <div class="overlay">Click on the Register Here to know about the:-
		<ul>
			<li>Oracle</li>
			<li>Automated Testing</li>
		</ul>	
	</div>
<figcaption><a href="register.html">Register Here</a></figcaption>
	</figure>
		</div>
	</a>

Answer 1

添加以下样式 -

.course{
  position: relative;
  display: block;
}

＆＃13;

＆＃13;

.image {
  position: relative;
  display: inline-block;
  margin: 10px;
}
.overlay {
  display: none;
}
.image a:hover .overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  border: 10px solid red;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  color: white;
  padding: 12px;
  font-size: 20px;
  pointer-events:none;
}
img {
  vertical-align: top;
}
.course{
position: relative;
display: block;
}

＆＃13;

<a href="#" class="course">
  <div class="image">
<figure>
  <img src="http://placekitten.com/250/200" width="100%" height: "100%">
  <div class="overlay">Click on the Register Here to know about the:-
    <ul>
      <li>Oracle</li>
      <li>Automated Testing</li>
    </ul>
  </div>
  <figcaption><a href="register.html">Register Here</a>
  </figcaption>
</figure>
  </div>
</a>

＆＃13;

＆＃13;

＆＃13;