悬停时的 Javascript Mouseevent

Question

目前我正在为我的鼠标悬停事件寻求帮助。

<div class="video-container">
<video id="my_video" loop muted poster="IMAGE_URL"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>

以上是我的video-container，在我的索引页面上我显示了 10 个视频。他们每个人都应该在悬停时显示视频预览，但是对于我当前的 javascript，只有带有 my_video id 的第一个视频在悬停时显示视频预览。

let myVideo = document.getElementById("my_video");
myVideo.addEventListener("mouseover", () => {
    myVideo.play()
    image.style.display = 'none'
});

myVideo.addEventListener("mouseleave", () => {
    myVideo.pause();
});

我怎样才能让我主页上的所有视频都以相同的方式运行？

Answer 1

因为你做了getElementById，它只涵盖了一个元素。和身份证对于 HTML 中的元素必须是唯一的，您不能有多个具有相同 ID 的元素。您可以为所有 video 元素赋予相同的类并立即应用所有这些元素，或者直接应用到所有 video 元素

let myVideos = document.querySelectorAll("video");
myVideos.forEach(vid => {
  vid.addEventListener("mouseover", () => {
    vid.play();
  });
  vid.addEventListener("mouseleave", () => {
    vid.pause();
  });
})

<div id="container">
  <video id="my_video_1" loop muted poster="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.tiverton.ri.gov%2Fimg%2Fcontent%2Ftrees%2Fhome_tree.png&f=1&nofb=1&ipt=c0fbdc7aa01163cdffb57908bb424286af2ebd3b6352a581d61660f31a299a51&ipo=images"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
<video id="my_video_2" loop muted poster="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.tiverton.ri.gov%2Fimg%2Fcontent%2Ftrees%2Fhome_tree.png&f=1&nofb=1&ipt=c0fbdc7aa01163cdffb57908bb424286af2ebd3b6352a581d61660f31a299a51&ipo=images"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>

Answer 2

您有多个具有相同 ID 的元素。这是你的问题，ID 必须是唯一的。

你想要这样的东西

注意你也应该not use fat arrow functions for event listeners

//Get the video elements we want
let videos = document.querySelectorAll(".video-container video");

//Loop the elements
videos.forEach((el) => {
  //Add the event listeners
  el.addEventListener("mouseover", function() {
    console.log("Play " + this.querySelector("source").src);
    this.play();
  });

  el.addEventListener("mouseleave", function() {
    console.log("Pause " + this.querySelector("source").src);
    this.pause();
  });

});

<div class="video-container">
  <video loop muted poster="IMAGE_URL"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>
<div class="video-container">
  <video loop muted poster="IMAGE_URL"> <!-- put your image here -->
  <source src="VIDEO_URL2" type="video/mp4"> <!-- path to your video here -->
</video>
</div>