实现<picture>/<video>元素hover时透明遮罩显示隐藏的技术问询

嘿，我来帮你搞定这个悬停显示透明遮罩的需求！你的思路已经很对了，我把代码补全并优化一下，给你两种方案选择——一种是基于你现有jQuery代码的改进版，另一种是更轻量的纯CSS方案（不用写JS哦）。

方案一：jQuery增强版（带过渡动画） #

首先得确保你的HTML结构是对应的，不然JS找不到元素：

<!-- 图片容器示例 -->
<div class="cmedia-box cspn-show-on-hover">
  <picture>
    <source srcset="your-image.webp" type="image/webp">
    <img src="your-image.jpg" alt="展示图片">
  </picture>
  <!-- 透明遮罩层 -->
  <div class="cspn-cover">
    <span>点击查看</span> <!-- 遮罩里可以放文字/图标 -->
  </div>
</div>

<!-- 视频容器示例 -->
<div class="cmedia-box cspn-show-on-hover">
  <video src="your-video.mp4" controls></video>
  <div class="cspn-cover">
    <span>播放视频</span>
  </div>
</div>

然后补全并优化CSS样式，确保遮罩能正确覆盖媒体元素：

.cmedia-box {
  position: relative;
  display: block; /* 用block比table更通用，不影响居中 */
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden; /* 防止媒体元素溢出容器 */
}

/* 让图片/视频占满容器 */
.cmedia-box picture,
.cmedia-box video {
  width: 100%;
  height: 100%;
  display: block;
}

.cspn-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑，透明度可改 */
  color: #fff;
  display: none; /* 默认隐藏 */
  /* 让遮罩内的内容完美居中 */
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 提示用户可交互 */
}

最后是改进后的jQuery代码，修复原代码的小语法问题，还给加了过渡动画：

$(document).ready(function() {
  $('.cspn-show-on-hover').hover(
    function() {
      // 用fadeIn替代直接改display，有淡入效果
      $(this).find('.cspn-cover').fadeIn(300);
    },
    function() {
      // 淡出效果，更丝滑
      $(this).find('.cspn-cover').fadeOut(300);
    }
  );
});

方案二：纯CSS方案（更轻量，无JS依赖） #

如果你的需求不需要复杂的JS逻辑，纯CSS就能搞定，性能更好代码也更简洁：

.cmedia-box {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.cmedia-box picture,
.cmedia-box video {
  width: 100%;
  height: 100%;
  display: block;
}

.cspn-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  opacity: 0; /* 默认完全透明 */
  pointer-events: none; /* 默认不拦截鼠标，避免影响视频控件操作 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease; /* 淡入淡出过渡 */
}

/* 悬停时显示遮罩 */
.cspn-show-on-hover:hover .cspn-cover {
  opacity: 1;
  pointer-events: auto; /* 悬停时允许点击遮罩 */
}

这个方案不需要写任何JS，完全靠CSS的:hover伪类实现，非常适合简单的悬停交互场景。

小提示 #

• 如果你想调整遮罩的透明度或者颜色，直接修改background-color里的rgba值就行，比如rgba(255,255,255,0.8)就是半透明白色遮罩。
• 如果视频控件被遮罩挡住了，可以把.cspn-cover的pointer-events: auto去掉，这样悬停时显示遮罩，但点击还是会穿透到下面的视频控件。

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