鼠标悬停.item-video-kami时play-icon过渡动画未触发问题

问题描述 #

预期效果：鼠标悬停在.item-video-kami元素上时，图片执行缩放动画，同时.play-icon元素的opacity变为0.8。
实际情况：仅图片缩放动画生效，.play-icon的过渡动画无视觉效果。

排查原因 #

.play-icon被<img>元素完全覆盖。在HTML结构中，<img>位于.play-icon之后，默认层叠顺序下，后渲染的元素层级更高，导致.play-icon被图片遮挡——即使hover时opacity值发生变化，也无法在页面上显示出来。

解决方法 #

给.play-icon添加z-index: 1（或更高数值），确保它在图片上方：

修改后的CSS代码：

.item-video-kami {
  width: 480px;
  overflow: hidden;
  position: relative;
}

.item-video-kami>.play-icon.full-height>svg {
  width: 106px;
  color: #ffffff50;
}

.item-video-kami img {
  transition: all .5s ease;
  /* 可选：明确图片层级，避免后续样式冲突 */
  position: relative;
  z-index: 0;
}

.item-video-kami>.play-icon {
  height: 100%;
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #1e1e1e94;
  opacity: 0;
  /* Initial opacity set to 0 */
  transition: opacity 0.2s ease-in 0.1s;
  /* 添加z-index确保在图片上方 */
  z-index: 1;
}

.item-video-kami:hover img {
  transform: scale(1.1);
}

.item-video-kami:hover .play-icon {
  opacity: 0.8;
  /* Adjusted opacity value to 0.8 for 80% */
}

补充说明 #

• 由于.play-icon是绝对定位，父容器.item-video-kami已设置position: relative，所以z-index会基于父容器生效。
• 给图片添加position: relative和z-index: 0是为了明确层级关系，避免后续样式冲突；即使不添加，只要.play-icon的z-index大于默认层级也能生效。

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