鼠标悬停控制视频播放/暂停仅在第一个容器生效问题排查

document.querySelector()只会返回匹配选择器的第一个DOM元素，所以你的代码只给第一个视频绑定了鼠标悬停事件，剩下三个视频完全没被处理，自然不会有反应。

有两种常用的修复方式，根据你的需求选择：

方式一：遍历所有视频绑定事件 #

用document.querySelectorAll()获取所有符合条件的视频，然后逐个绑定事件。注意事件处理函数里用this（或者e.target）指代当前触发事件的视频，而不是固定操作第一个元素：

// 获取所有目标视频元素
const clips = document.querySelectorAll(".workVideo > div > div > div > video");

// 遍历每个视频，绑定悬停播放/暂停事件
clips.forEach(clip => {
  clip.addEventListener("mouseover", function() {
    this.play();
  });
  
  clip.addEventListener("mouseout", function() {
    this.pause();
  });
});

方式二：事件委托（更高效） #

如果你的视频数量较多，或者后续可能动态添加视频，推荐用事件委托——把事件绑定到所有视频的共同父容器上，通过事件冒泡来处理：

// 找到所有.workVideo的共同父容器（根据你的页面结构调整，比如直接用document.body也行）
const parentContainer = document.querySelector(".workVideo").parentElement;

parentContainer.addEventListener("mouseover", (e) => {
  // 确认触发事件的是目标视频
  if (e.target.matches(".workVideo > div > div > div > video")) {
    e.target.play();
  }
});

parentContainer.addEventListener("mouseout", (e) => {
  if (e.target.matches(".workVideo > div > div > div > video")) {
    e.target.pause();
  }
});

事件委托的好处是不用给每个元素单独绑定事件，性能更好，而且新添加的视频也能自动继承这个事件逻辑。

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