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即可获得的解决方案。

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

如果你想保持标题可见，它应该是一个解决方案..！

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 2

使用关键帧或此解决方案：

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

Answer 3

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

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 4

如果要删除叠加层，请从.upper类

中删除转换属性

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

如何在鼠标悬停时隐藏叠加层

4 个答案: