鼠标移出时CSS Transition效果失效问题求助

我来帮你搞定这个鼠标移出过渡失效的问题！看你给出的代码片段，核心问题出在**visibility属性不支持过渡动画**上——这会直接打断你想要的opacity淡出效果。

问题原因拆解 #

当鼠标悬停在.wrap_img上时，你把.play-icon-hover的visibility设为visible、opacity设为1，这时候元素能正常显示；但鼠标移出时，visibility会立刻变回hidden，哪怕opacity有过渡动画，元素已经被强制隐藏了，自然看不到淡出的过程。

两种可行的修复方案 #

方案一：给visibility添加过渡（配合opacity同步执行）

我们可以让visibility和opacity一起参与过渡，虽然visibility的过渡是离散的（要么全显要么全隐），但设置相同的过渡时长后，它会在opacity动画结束后再隐藏，这样就能看到完整的淡出效果：

.wrap_img {
  position: relative;
  width: 300px;
  height: 200px;
  background: #555;
}
.play-icon-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  /* 同时过渡visibility和opacity，保持时长一致 */
  transition: visibility 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.wrap_img:hover .play-icon-hover {
  visibility: visible;
  opacity: 1;
}
.play-icon-hover i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  color: #fff;
}

方案二：用opacity+pointer-events替代visibility（更简洁）

如果不需要依赖visibility的“隐藏时不接收交互”特性，我们可以完全用opacity控制显示隐藏，再配合pointer-events来避免透明状态下的元素干扰鼠标交互：

.wrap_img {
  position: relative;
  width: 300px;
  height: 200px;
  background: #555;
}
.play-icon-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none; /* 透明时不响应鼠标事件 */
  transition: opacity 0.5s ease-in-out;
}
.wrap_img:hover .play-icon-hover {
  opacity: 1;
  pointer-events: auto; /* 显示时恢复交互能力 */
}
.play-icon-hover i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  color: #fff;
}

方案选择建议 #

• 如果你需要元素在隐藏时完全不占用交互空间（比如下面有可点击的内容），选方案一；
• 如果只是单纯的显示/隐藏过渡，方案二更简洁，代码量更少，也更易维护。

内容的提问来源于stack exchange，提问作者Devilix