javascript - 为什么当我移动鼠标时，视频上方会出现海报？

Question

我正在尝试使用 mouseover/mouseout 编写以下代码来播放和暂停 HTML 视频。

  <div>
    <video id="video" controls width="50%" class="border" onmouseout="Stop()" onmouseover="Play()" controls="false">
        <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay></source>
    </video>

  </div>
</div>

JS

function Play() {
     $('#video').get(0).play();
 }
 function Stop() {
      $('#video').get(0).pause();
  }

我想要的是每次我将鼠标移开时，海报或图像就会出现在视频上。 (就像本站的以下示例:https://www.lawebdecanada.com/work/featured/)

我注意到能够做到这一点，希望有人能帮助我弄清楚如何做到这一点。这是我在 codepen 上的代码:https://codepen.io/felixgonzalo/pen/abzQPjZ

谢谢!

Answer 1

要让一个元素覆盖另一个元素，您可以将它们放在同一个容器中，并在叠加层上使用 position:absolute 和更高的 z-index。然后在 mouseenter 和 mouseleave 事件下(注意:不是 mouseout 和 mouseover)您可以隐藏/显示叠加并播放/暂停视频。试试这个:

var container = document.querySelector('.video-container');

container.addEventListener('mouseleave', function() {
  this.querySelector('.overlay').classList.remove('hide');
  this.querySelector('.video').pause();
});

container.addEventListener('mouseenter', function() {
  this.querySelector('.overlay').classList.add('hide');
  this.querySelector('.video').play();
});

.video-container {
  position: relative;
  width: 300px;
}
.video-container video {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #C00;
  color: #FFF;
  display: block;
  z-index: 10;
  text-align: center;
}
.overlay.hide {
  display: none;
}
.overlay p {
  margin-top: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-container">
  <video class="video" controls class="border" controls="false">
    <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
  </video>
  <div class="overlay">
    <p>Hover me</p>
  </div>
</div>