如何实现鼠标悬停时按25%宽度分段播放不同视频

我之前看到一个“鼠标悬停时切换视频”的实现，完全符合我网站的需求。作为HTML和CSS初学者，我想把这个方案扩展成4个视频的版本——把容器宽度分成四等份，每一段被悬停时显示对应的短视频。

原方案代码 #

JavaScript

$('.video_wrapper .video_hover').hover(function() {
  $('.video_wrapper').addClass('isHover');
}, function() {
  $('.video_wrapper').removeClass('isHover');
});

CSS

.video_wrapper {
  overflow: hidden;
  position: relative;
}

.video_wrapper video {
  height: auto;
  width: 100vw;
}

.video_wrapper .eat_video {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.video_wrapper .video_hover {
  bottom: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  z-index: 1;
}

.video_wrapper .live_video,
.video_wrapper .eat_video {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.video_wrapper.isHover .live_video {
  opacity: 0;
}

.video_wrapper.isHover .eat_video {
  opacity: 1;
}

HTML

<!-- 需要引入jQuery库 -->
<div class=video_wrapper>
  <div class="live_video">
    <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="示例视频地址" type="video/mp4" >
     </video>
  </div>
  <div class="eat_video">
    <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="示例视频地址" type="video/mp4" >
     </video>
  </div>
  <div class="video_hover"></div>
</div>

扩展为4段的实现方案 #

核心思路是：把悬停区域拆成4个各占25%宽度的区块，给每个区块和对应视频加专属标识，悬停时只显示对应视频，隐藏其余。

完整代码实现

HTML

<!-- 需要引入jQuery库（可下载本地文件引入） -->
<div class="video_wrapper">
  <!-- 默认显示的视频 -->
  <div class="video-section active" data-section="1">
    <video muted autoplay loop preload="auto" class="video">
      <source src="你的视频1地址" type="video/mp4">
    </video>
  </div>
  <!-- 视频2 -->
  <div class="video-section" data-section="2">
    <video muted autoplay loop preload="auto" class="video">
      <source src="你的视频2地址" type="video/mp4">
    </video>
  </div>
  <!-- 视频3 -->
  <div class="video-section" data-section="3">
    <video muted autoplay loop preload="auto" class="video">
      <source src="你的视频3地址" type="video/mp4">
    </video>
  </div>
  <!-- 视频4 -->
  <div class="video-section" data-section="4">
    <video muted autoplay loop preload="auto" class="video">
      <source src="你的视频4地址" type="video/mp4">
    </video>
  </div>

  <!-- 4个悬停触发区块 -->
  <div class="hover-block" data-target="1"></div>
  <div class="hover-block" data-target="2"></div>
  <div class="hover-block" data-target="3"></div>
  <div class="hover-block" data-target="4"></div>
</div>

CSS

.video_wrapper {
  overflow: hidden;
  position: relative;
  width: 100vw;
}

.video_wrapper .video {
  height: auto;
  width: 100%;
}

/* 所有视频区域默认隐藏 */
.video-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 默认显示第一个视频 */
.video-section.active {
  opacity: 1;
}

/* 悬停区块样式：4个各占25%宽度 */
.hover-block {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  cursor: pointer;
  z-index: 1;
}

/* 定位4个悬停区块 */
.hover-block[data-target="1"] { left: 0; }
.hover-block[data-target="2"] { left: 25%; }
.hover-block[data-target="3"] { left: 50%; }
.hover-block[data-target="4"] { left: 75%; }

JavaScript

// 悬停逻辑：显示对应视频，隐藏其他
$('.hover-block').hover(function() {
  const targetSection = $(this).data('target');
  // 隐藏所有视频，显示目标视频
  $('.video-section').removeClass('active');
  $(`.video-section[data-section="${targetSection}"]`).addClass('active');
}, function() {
  // 鼠标离开后恢复显示默认视频（第一个）
  $('.video-section').removeClass('active');
  $('.video-section[data-section="1"]').addClass('active');
});

关键说明 #

• 每个悬停区块通过data-target和对应视频的data-section关联，逻辑清晰，方便后续扩展更多视频
• 视频切换用opacity过渡，保持平滑效果
• 鼠标离开所有区块后，自动恢复显示默认视频（可根据需求修改为保持最后悬停的视频）

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