jQuery mouseleave - mouseenter 仅在第一个元素中起作用
jQuery mouseleave - mouseenter just work in the First Element
我正在努力尝试在多个视频中设置 mouseenter
和 mouseleave
事件。一切似乎都很完美,视频在 mouseenter
时播放,在 mouseleave
时停止。
但是,当我添加了多个视频时,只播放第一个视频。我试图弄清楚它缺少什么我找不到方法。
这里是link代码笔:https://codepen.io/felixgonzalo/pen/poJoXRW
我的代码是:
<div class="main-wrapper">
<div class="video-container">
<video id="video" class="video" controls class="border" controls="false" muted loop>
<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"></div>
</div>
<div class="video-container">
<video id="video-2" class="video" controls class="border" controls="false" muted loop>
<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"></div>
</div>
</div>
jQuery
$('.video').prop('currentTime', 0)
function Play() {
$('.video').get(0).play();
}
function Stop() {
$('.video').prop('currentTime', 0).get(0).pause();
}
$(document).ready(function(){
$('.video-container').mouseenter(function(){
$('.overlay', this).addClass("hide")
Play();
}).mouseleave(function(){
$('.overlay', this).removeClass("hide")
Stop();
});
});
我也试过用 JS 实现,但没有成功:
var container = document.querySelector('.video-container');
container.addEventListener('mouseleave', function() {
this.querySelector('.overlay').classList.remove('hide');
Stop();
});
container.addEventListener('mouseenter', function() {
this.querySelector('.overlay').classList.add('hide');
Play()
});
非常感谢任何帮助
您的函数播放仅获取第一个视频,因为您指定了 0
索引。您需要传递您悬停的当前视频索引以触发播放。
编辑:工作代码。
我让你的函数接受一个参数,我将其设置为触发鼠标事件的元素的第一个视频元素子元素。
$('.video').prop('currentTime', 0)
$(document).ready(function() {
$('.video-container').mouseenter(function() {
$('.overlay', this).addClass("hide")
$(this).children('.video')[0].play();
}).mouseleave(function() {
$('.overlay', this).removeClass("hide")
$($(this).children('.video')[0]).prop('currentTime', 0)
$(this).children('.video')[0].pause();
});
});
我正在努力尝试在多个视频中设置 mouseenter
和 mouseleave
事件。一切似乎都很完美,视频在 mouseenter
时播放,在 mouseleave
时停止。
但是,当我添加了多个视频时,只播放第一个视频。我试图弄清楚它缺少什么我找不到方法。
这里是link代码笔:https://codepen.io/felixgonzalo/pen/poJoXRW
我的代码是:
<div class="main-wrapper">
<div class="video-container">
<video id="video" class="video" controls class="border" controls="false" muted loop>
<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"></div>
</div>
<div class="video-container">
<video id="video-2" class="video" controls class="border" controls="false" muted loop>
<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"></div>
</div>
</div>
jQuery
$('.video').prop('currentTime', 0)
function Play() {
$('.video').get(0).play();
}
function Stop() {
$('.video').prop('currentTime', 0).get(0).pause();
}
$(document).ready(function(){
$('.video-container').mouseenter(function(){
$('.overlay', this).addClass("hide")
Play();
}).mouseleave(function(){
$('.overlay', this).removeClass("hide")
Stop();
});
});
我也试过用 JS 实现,但没有成功:
var container = document.querySelector('.video-container');
container.addEventListener('mouseleave', function() {
this.querySelector('.overlay').classList.remove('hide');
Stop();
});
container.addEventListener('mouseenter', function() {
this.querySelector('.overlay').classList.add('hide');
Play()
});
非常感谢任何帮助
您的函数播放仅获取第一个视频,因为您指定了 0
索引。您需要传递您悬停的当前视频索引以触发播放。
编辑:工作代码。
我让你的函数接受一个参数,我将其设置为触发鼠标事件的元素的第一个视频元素子元素。
$('.video').prop('currentTime', 0)
$(document).ready(function() {
$('.video-container').mouseenter(function() {
$('.overlay', this).addClass("hide")
$(this).children('.video')[0].play();
}).mouseleave(function() {
$('.overlay', this).removeClass("hide")
$($(this).children('.video')[0]).prop('currentTime', 0)
$(this).children('.video')[0].pause();
});
});