鼠标移开时的过渡不起作用

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>

演示：https://jsfiddle.net/L41kgye3/10/

Answer 1

改为：

transition: all 0.5s ease-in-out;

Answer 2

您的过渡在 mouseout 上不起作用的原因是您在 css 中使用了 opacity 0.5s ease-in-out 而您还在 css 选择器 [=12] 中使用了 visibility: hidden =].所以你需要使用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;
}

鼠标移开时的过渡不起作用

Transition on mouse out is not working

html

css

transition