求助：实现按钮hover切换视频效果（跨页面按钮）

核心思路 #

通过自定义data属性建立按钮与视频的关联，用JavaScript监听鼠标悬停事件，控制视频的显示/隐藏状态，无需依赖父子/兄弟DOM关系。

具体实现步骤 #

1. 给按钮和视频添加关联标识
   给每个跳转按钮添加data-target-video属性，值对应目标视频的ID；给每个视频设置唯一ID：

   <!-- 示例跳转按钮（与视频无嵌套关系） -->
   <a href="/page1.html" class="nav-btn" data-target-video="video-about">关于</a>
   <a href="/page2.html" class="nav-btn" data-target-video="video-work">作品</a>
   
   <!-- 示例视频容器 -->
   <div class="video-grid">
     <video id="video-about" src="about.mp4" muted loop autoplay class="video-item"></video>
     <video id="video-work" src="work.mp4" muted loop autoplay class="video-item"></video>
   </div>
   

2. CSS设置默认显示/隐藏规则
   只保留默认视频显示，其余视频默认隐藏：

   .video-item {
     display: none;
     /* 保留你已有的grid布局样式 */
   }
   .video-item.active {
     display: block; /* 或对应你grid布局的显示值，比如grid-area */
   }
   

   给初始需要显示的视频手动加上active类。

3. JavaScript实现悬停切换逻辑
   获取所有按钮和视频，绑定悬停事件切换视频状态：

   const navBtns = document.querySelectorAll('.nav-btn');
   const videos = document.querySelectorAll('.video-item');
   
   navBtns.forEach(btn => {
     btn.addEventListener('mouseover', () => {
       // 隐藏所有视频
       videos.forEach(vid => vid.classList.remove('active'));
       // 显示当前按钮对应的目标视频
       const targetVid = document.getElementById(btn.dataset.targetVideo);
       targetVid.classList.add('active');
     });
   
     // 可选：鼠标移出后恢复默认视频
     btn.addEventListener('mouseout', () => {
       videos.forEach(vid => vid.classList.remove('active'));
       document.getElementById('video-default').classList.add('active');
     });
   });
   

额外提示 #

• 视频添加muted属性是为了绕过浏览器自动播放限制，可根据需求调整。
• 如果按钮是动态生成的，改用事件委托绑定到父元素上，避免重复绑定：

  document.querySelector('.nav-container').addEventListener('mouseover', (e) => {
    if(e.target.classList.contains('nav-btn')) {
      // 执行切换逻辑
    }
  });
  

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