时间戳

首页 > 解决方案 > 添加了隐藏元素，但现在我的悬停效果不再起作用

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

问题描述

我的 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>

标签： hoverhidden

解决方案

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

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 在元素出现在页面上之前运行，它将失败。

推荐阅读