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

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>