视频播放/暂停悬停只在一个容器上工作

Question

我在一个页面上有四个视频，下面的代码工作，但只有当鼠标悬停在第一个视频上。当悬停在其他三个上面时，什么都没有发生?

都在相同的div中，具有相同的类名。

let clip = document.querySelector(".workVideo > div > div > div > video")
clip.addEventListener("mouseover", function (e) {
clip.play();
})
clip.addEventListener("mouseout", function (e) {
clip.pause();
})

Answer 1

const clip = document.querySelectorAll(".workVideo > div > div > div > video");
for (let i = 0; i < clip.length; i++) {
clip[i].addEventListener("mouseover", function(e) {
clip[i].play();
});
clip[i].addEventListener("mouseout", function(e) {
clip[i].pause();
});
}