如何使文本悬停以播放视频

问题描述

我有一个关于 JavaScript onmouSEOver 事件的问题。我想制作一个困难的 onmouSEOver 事件来播放视频。我想要做的是当我将鼠标悬停在文本上时播放视频。

来源：https://www.ferrari.com/

当您点击汽车并将鼠标悬停在其中一个模型上时，您就会明白我的意思。

谢谢！

新信息；

我的代码：

<div id="text1">
    <h1>Nummer 1</h1>
</div>

<div id="movie1">
    <video width="320" height="240">
        <source src="https://www.spiralex.nl/wp-content/uploads/2020/12/oil-and-gas-set-1cx2641.mp4" type="video/mp4">
    </video>
</div>

<script type ="text/javascript">

    var text1 = document.getElementById = "text1"
    var movie1 = document.getElementById = "movie1"
    
    
    text1.onmousever = function(){
        movie1.play
    }
    
</script>

我被困在鼠标悬停效果中，因为我不知道如何将它与我的视频链接......我也在使用带有 HTML 小部件的 Elementor pro，也许这就是问题所在。 截图来源

这就是我的意思。当您将鼠标悬停在汽车模型上时，有关该模型的视频就会开始播放。

解决方法

您的 movie1 对象指的是 div 而不是标签本身 并且您还需要使用 addEventLister 并监听鼠标悬停事件

<div id="text1">
    <h1>Nummer 1</h1>
</div>

<div>
    <video width="320" height="240" id = "movie1">
        <source src="https://www.spiralex.nl/wp-content/uploads/2020/12/oil-and-gas-set-1cx2641.mp4" type="video/mp4">
    </video>
</div>

<script type ="text/javascript">

    var text1 = document.getElementById("text1")
    var movie1 = document.getElementById("movie1")
    text1.addEventListener("mouseover",()=>{
      movie1.play();
    })
</script>