CSS 视频图层失效解决方法

✅ 正确做法是：将 .img-caption 提升为

<a href="TO SET">
  <div class="OYYGC grid-item" onmouseover="regifOYYGC()" onmouseleave="revertOYYGC()">
    <video 
      class="img" 
      id="OYYGCimage" 
      width="100%" 
      height="auto" 
      src="./static/assets/OYYGC.mp4" 
      loop 
      muted 
      aria-label="Oh Yeah You Gonna Cry? video">
    </video>
    <div class="img-caption">
      <div class="vid-title">Oh Yeah You Gonna Cry?</div>
      <div class="vid-director">Animated x Live Music Video</div>
    </div>
  </div>
</a>

同时，更新 CSS 以确保图层不干扰视频的鼠标事件（如播放/暂停触发）：

.OYYGC {
  position: relative; /* ✅ 已存在，确保绝对定位基准 */
  overflow: hidden;
  font-family: Roboto, sans-serif;
}

/* ✅ 关键修复：将 img-caption 移出 video 后，需显式禁用 pointer-events */
.OYYGC .img-caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* ? 防止遮挡 video 的 hover/click */
}

.OYYGC:hover .img-caption {
  opacity: 1;
}

.OYYGC:hover .img {
  filter: brightness(50%);
}

⚠️ 注意事项：

• pointer-events: none 是必须项：若省略，.img-caption 会捕获鼠标事件，导致 onmouseover 和 onmouseleave 在视频上失效（即悬停无反应）；
• 原 JavaScript 中 regifOYYGC() 调用 content.play() 是安全的，但建议增加错误处理：

  function regifOYYGC() {
    const video = document.getElementById("OYYGCimage");
    if (mouseWasGoneOYYGC && video) {
      video.play().catch(e => console.warn("Video autoplay prevented:", e));
      mouseWasGoneOYYGC = false;
    }
  }

• 所有尺寸单位推荐使用 rem 或 em 替代 vw（如 font-size: 1rem），避免在缩放或小屏下文字过小不可读。

总结：CSS 表现异常的根源常不在样式本身，而在 HTML 结构是否符合规范。验证 DOM 结构（使用浏览器 DevTools 的 Elements 面板确认 .img-caption 是否真实存在于 .OYYGC 内部）、理解元素嵌套限制、合理运用 pointer-events，是解决此类“样式不生效”问题的三把关键钥匙。

终于介绍完啦！小伙伴们，这篇关于《CSS 视频图层失效解决方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！