只是想让一个视频在另一个“覆盖”div悬停时播放。关于这个问题的一些背景，我在页面上有几个视频，当悬停时，它们会播放。
在我添加一个位于视频上方的div之前，一切都可以正常工作。一旦我在视频顶部添加了第二个“覆盖”div，下面的代码就不再起作用，因为从技术上讲，我不再在视频上悬停了。
我正在使用视频顶部的覆盖div来放置一些关于它的信息。
<script type="text/javascript">
var figure = $('.movies');
var vid = $("video");
var cover = $(".video-overlay");
[].forEach.call(vid, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e) {
this.play();
}
function hideVideo(e) {
this.pause();
}
</script>
我如何调整它以说“如果悬停在div类. video覆盖上，则启动视频。如果没有悬停，则暂停。”
javascript中的解决方案：
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
然后，在jQuery中，我会这样做：
$('.myHoveredElement').hover(function(){
// This will happen when the .myHoveredElement is hovered
vid.play();
}, function(){
// This will happen when the .myHoveredElement is not hovered anymore (mouseleave)
vid.pause();
});
这是jQuery悬停元素的留档
如果您希望它在每个有元素悬停的视频上工作，您必须为每个视频的容器提供一个类，其中包含您希望在悬停时做出反应的覆盖层。例如，您的html将如下所示：
<div class="video-container">
<video ...>
</video>
<div class="video-overlay"></div>
</div>
然后，你会做这样的事情：
$('.video-container').hover(function(){
//Happens when you're hover (mouseenter)
$(this).children('video').get(0).play();
}, function(){
// Happens when mouse leaves the video container
$(this).children('video').get(0).stop();
})
这样，当您将任何具有名为. video容器的容器悬停的视频悬停时，它都可以工作。
希望它能回答你的问题
