添加了隐藏元素，但现在我的悬停效果不再起作用

问题描述

我的 javascript 代码有问题，我为文本制作了悬停效果以播放视频。但现在我想在你不悬停文本时隐藏视频。当我添加隐藏元素时，悬停效果不再起作用...

你们知道解决方案吗？

<script type="text/javascript">

var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");

function PauseH(){
    Hvideo.pause();
}

function PlayH(){
if(Hvideo.paused)
    Hvideo.play();
    
}

if(Hvideo.pause){
    Hvideo.hidden = true;
}else{
    Hvideo.hidden = false;
}
</script>

<div>
<video id="Hvideo" width="320" height="240" preload="auto">
    <source src="URL will be added" type="video/mp4">
</video>
<button id="Htext" onmouSEOver="PlayH()" onmouSEOut="PauseH()">HVAC</button>

</div>

解决方法

您的代码似乎可以正常工作：

https://www.w3schools.com/code/tryit.asp?filename=GMLBBYWJV4I2

<div>

<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>

</div>

<video id="Hvideo" width="320" height="240" controls>
  <source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<script>
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");

function PauseH(){
    Hvideo.pause();
    Hvideo.hidden = true;
}

function PlayH(){
  if(Hvideo.paused) {
    Hvideo.play();
    Hvideo.hidden = false;
  }    
}

</script>

我确实想知道问题是否归结于在运行 JavaScript 之前需要 HTML 元素存在的事实，如果 JavaScript 在元素出现在页面上之前运行它会失败。

hidden hover