我想在文本上悬停，当用户悬停时，视频出现并播放，当你不悬停时，视频会消失。
我在codepen上发现了以下内容，当悬停在特定文本上时，它确实适用于图像和视频，但是当我复制HTML代码以列出另一个视频时，因为我不希望这用于图像，下一个视频不会播放。它将只播放列出的第一个视频。请帮助!
function vidPlay() {
$("#video1").get(0).play();
};
function vidPause() {
$("#video1").get(0).pause();
};
$(document).ready(function(){
$("#textToggler").click(function(){
$(".toggleText").toggle();
});
});
function toggleImage() {
$(".hiddenclickimg").toggle();
};.hiddenimg {
display: none;
}
.hiddentxt {
font-weight: bold;
color: #F00;
z-index:99;
}
.hiddentxt a {
color: #F00;
text-decoration: none;
z-index: 99;
}
.hiddenclick {
font-weight: bold;
color: #F00;
text-decoration: none;
cursor: pointer;
}
.hiddenclick a {
color: #F00;
text-decoration: none;
}
.hiddenclick a:visited {
color: #F00;
text-decoration: none;
}
.hiddentxt:hover ~ .hiddenimg {
display: block;
position: absolute;
z-index: 2
}
.hiddenclickimg {
display: none;
}<head>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<p>
Hover to see a <span class="hiddentxt"><a href="https://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg">banana</a></span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg" width="250" /></span>.
</p>
<p>
Let's see if it works with <span class="hiddentxt" onmouseover="vidPlay()" onmouseout="vidPause()"><a href="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4">videos</a></span>. (The video should play when it's displayed, but sometimes it takes a while to load.)
<span class="hiddenimg"><video id="video1" loop>
<source src="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4" type="video/mp4">
</video></span>
</P>
<p> Click <span class = "hiddenclick" onclick = "toggleImage()">here</span> to show image.<br>
<span class="hiddenclickimg"><img src = "https://s-media-cache-ak0.pinimg.com/originals/22/74/8c/22748c9b9cc2c039aed206cab0247404.gif"/></span>
</p>
</body>使用类代替ID。id(顾名思义)应该是唯一的.
下面是一个例子如何悬停播放/暂停多个视频-没有不必要的jQuery:
const ELS_aVid = document.querySelectorAll(".hoverVid");
const toggleVideo = (ev) => {
const EL = ev.currentTarget;
const EL_video = EL.querySelector("video");
const isPlay = ev.type === "mouseenter";
EL_video[isPlay ? "play" : "pause"]();
};
ELS_aVid.forEach(EL => {
["mouseenter", "mouseleave"]
.forEach(evt => EL.addEventListener(evt, toggleVideo))
});.hoverVid {
position: relative;
}
.hoverVid video {
position: absolute;
height: 150px;
top: 100%;
left: 0;
z-index: 1;
box-shadow: 0 0 30px rgba(0,0,0,0.3);
/* "hidden" and prepared animation state*/
transition: 0.5s;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(20px);
}
.hoverVid:hover video {
/* on hover, animate into view */
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}<a class="hoverVid" href="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4">
Hover to watch video
<video loop src="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4"></video>
</a>
<br>
or if you feel like
<a class="hoverVid" href="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4">
watch the same video again LOL
<video loop src="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4"></video>
</a>搜索任何你不理解的JavaScript方法(如:querySelectorAll或forEach)在MDN文档