如何在鼠标悬停时隐藏覆盖

Question

这是我的代码，我想要的是在鼠标悬停后隐藏覆盖，而发生的事情是它保持活动状态，直到我移除图像上的鼠标悬停为止。 有没有人可以解决这个问题

 .upper {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; overflow: hidden; background: #ddd; opacity: 0.5; transition: .2s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%;} .maine {position: relative; overflow: hidden;} .upper:after {width 0; height: 0;} 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> heading </div> </div> </div> 

Answer 1

这是您不使用@keyframes的解决方案。

 .maine {position: relative; overflow: hidden;} .upper {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; overflow: hidden; background: #ddd; transition-property: width, height; opacity: 0.5; transition: .4s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%; opacity: 0; } 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> heading </div> </div> </div> 

如果您想保持前进方向，那应该是一个解决方案。

 .maine {position: relative; overflow: hidden;} .upper {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; overflow: hidden; background: #ddd; transition-property: width, height; opacity: 0.5; transition: .4s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%; opacity: 0; } .heading {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding-top: 30%; text-align: center; display: none; transition: all .2s linear !important;} .maine:hover .heading {display: block;} 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"></div> <di class="heading"><h2>Heading</div> </div> </div> 

Answer 2

使用关键帧或以下解决方案：

.maine:hover .upper:active,
.maine:hover .upper:focus,
.maine:hover .upper:hover {
  opacity: 0;
}

Answer 3

我认为最简单的解决方案是切换到animation 。

 .upper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .upper-background { position: absolute; width: 0%; height: 0%; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; border-radius: 100%; background-color: rgba(251, 251, 251, 0.5); } .upper-inner { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; opacity: 0; } .maine:hover .upper-background { animation: expand 0.6s ease; animation-fill-mode: forwards; animation-iteration-count: 1; } .maine:hover .upper-inner { animation: showText 0.3s ease; animation-fill-mode: forwards; animation-iteration-count: 1; } .maine { position: relative; display: inline-block; overflow: hidden; } @keyframes showText { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } } @keyframes expand { 0% { width: 0%; height: 0%; } 95% { width: 150%; height: 150%; } 100% { width: 150%; height: 150%; opacity: 0; } } 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> <div class="upper-background"></div> <div class="upper-inner">NAME</div> </div> </div> </div> 

Answer 4

如果要删除叠加层，请从.upper类中删除transform属性

 .upper {position: absolute; top: 50%; bottom: 0; left: 50%; width: 0; height: 0; overflow: hidden; background: #ddd; opacity: 0.5; transition: .2s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%;} .maine {position: relative; overflow: hidden;} .upper:after {width 0; height: 0;} 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> heading </div> </div> </div>