如何实现悬停播放视频的可横向滚动画廊，类似Netflix交互效果

问题根因 #

你遇到的布局异常确实是封面图的全局绝对定位导致：所有封面脱离正常文档流后全部重叠在同一个坐标位置，flex横向滚动布局自然失效。

调整思路 #

将每组「封面图+对应视频」封装为独立的卡片容器，给卡片添加相对定位属性，让内部元素的绝对定位仅作用于当前卡片范围内，不影响整体flex布局。

完整可运行代码 #

HTML #

<!-- 外层横向滚动容器 -->
<div class="gallery-container">
  <!-- 单个卡片：每组封面+视频独立封装 -->
  <div class="gallery-card">
    <img class="card-cover" src="你的封面图地址1" alt="封面">
    <video class="card-video" muted src="你的视频地址1" type="video/mp4"></video>
  </div>
  <div class="gallery-card">
    <img class="card-cover" src="你的封面图地址2" alt="封面">
    <video class="card-video" muted src="你的视频地址2" type="video/mp4"></video>
  </div>
  <div class="gallery-card">
    <img class="card-cover" src="你的封面图地址3" alt="封面">
    <video class="card-video" muted src="你的视频地址3" type="video/mp4"></video>
  </div>
  <!-- 可扩展更多卡片 -->
</div>

CSS #

/* 外层滚动容器：维持横向滚动flex布局 */
.gallery-container {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  width: 1200px;
  padding: 10px 0;
  margin: 0 auto;
}

/* 卡片容器：相对定位作为内部元素定位参照物 */
.gallery-card {
  position: relative;
  flex-shrink: 0;
  width: 300px;
  height: 535px;
}

/* 封面默认置顶显示 */
.card-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 0.2s ease;
}

/* 视频默认在封面下方隐藏 */
.card-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 卡片悬停时切换显示状态 */
.gallery-card:hover .card-cover {
  opacity: 0;
  z-index: 0;
}
.gallery-card:hover .card-video {
  opacity: 1;
  z-index: 3;
}

JavaScript #

const cardVideos = document.querySelectorAll(".card-video");

cardVideos.forEach(video => {
  // 鼠标悬停播放视频
  video.addEventListener('mouseenter', () => {
    video.play().catch(err => {});
  });
  // 鼠标移出暂停并重置播放进度
  video.addEventListener('mouseleave', () => {
    video.pause();
    video.currentTime = 0;
  });
});

实现效果说明 #

• 完整保留横向滚动特性：所有卡片为正常文档流元素，flex布局生效，支持横向滑动
• 悬停交互正常：鼠标移到卡片上时封面自动隐藏，对应视频淡入播放，移出后切回封面
• 无布局重叠问题：每个卡片内部的绝对定位仅作用于自身，不会影响其他卡片位置

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