Question

在我的场景中，我尝试了很多组合，但是我无法弄清楚为什么过渡不能用于鼠标。希望你的帮助...谢谢！

CSS：

.wrap_img {
  position: relative;
  width: 300px;
  height: 200px;
  background: #555;
}

.play-icon-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.play-icon-hover i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  color: #fff;
  opacity: 0.7;
  font-size: 90px;
}

.wrap_img:hover .play-icon-hover {
  visibility: visible;
  opacity: 1;
  cursor: pointer;
  z-index: 1;
}

HTML：

<div class="wrap_img">
  <a href="" title="">
    <div class="play-icon-hover">
      <i class="fa fa-play-circle"></i>
    </div>
  </a>
</div>

DEMO：https://jsfiddle.net/L41kgye3/10/

Answer 1

您的转换不适用于mouseout的原因是您在css中使用了opacity 0.5s ease-in-out，而您还使用了可见性：隐藏在您的css选择器.play-icon-hover上。所以你需要使用transition: all 0.5s ease-in-out。试试这段代码。

.play-icon-hover {
    position: absolute;
      width: 100%;
    height: 100%;
      opacity: 0;
      transition: all 0.5s ease-in-out;
}

Answer 2

更改为：

transition: all 0.5s ease-in-out;

鼠标移出无效

2 个答案: