link 悬停时更改视频

Question

我正在尝试制作这种效果（https://www.stornerprod.com/directors），在 link 悬停时更改视频。

我选择了 GSAP，它应该做交易，但即使它改变了视频 URL，当我悬停我的 link 时，视频本身没有刷新，我错过了什么？

感谢您提供的任何帮助！

HTML

     <video id="videoBG"  autoplay muted loop>
        <source src="./wp-content/uploads/2021/08/video.mp4" type="video/mp4">

 </video><div class="menu-home is-flex is-flex-column">
                       <div class="menu-home ">
                         <a data-src="/wp-content/uploads/2021/08/test.mp4" href="/commercial/">
            test</a>
                      </div>

我的 Gsap

$('.menu-home a').hover(function () {
   var value = $(this).attr('data-src');
   TweenMax.to('#videoBG source', 2, { attr: { src: value }, ease: Power1.easeOut, });
});

Answer 1

将鼠标悬停在文本上时更改文本颜色写入此代码

    <!DOCTYPE html>
<html>
<head>
    <title>Answer</title>
    <style type="text/css">
        a:link, a:visited{
            text-decoration:none;
            color:black;
            background-color:none;

        }
        a:hover,a:active{
            text-decoration: none;
            color:red;
            background-color:none;
        }
    </style>
</head>
<body>
<a href="https://www.google.com">Google</a>
</body>
</html>

Answer 2

这就是你想要的。

var video = document.getElementById("video");

var links=  document.querySelectorAll("a.link")
links.forEach(a=>{
    a.addEventListener("mousemove",()=>{
    if(a.matches(':hover')){
        if(video.src != a.getAttribute("link")){
            video.src=a.getAttribute("link");
        }
        
    }
    })
})
document.addEventListener('mousemove', ()=>{

});

#container{
    display: flex;
    flex-direction: row
}
#video,.link{
    margin: 10px;
}
.link{
    font-size: 20px;
    text-decoration: none;
    background-color: silver;

    padding: 10px;
        width: calc(100% + 100px)
}
#link-container{
    display: flex;
    flex-direction: column;
}

<div id="container">


<video id="video" autoplay src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="350"></video>
    <div id="link-container">
        <a href="#" class="link" link="https://www.w3schools.com/html/mov_bbb.mp4">video no.1</a>
        <a href="#" class="link" link="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">video no.2</a>

    </div>
</div>

我制作了一个代码，您可以在其中添加 <a> 具有属性 link 的元素，您可以在其中更改视频的 link。

将鼠标悬停在 video no.1 和 video no.2 上以更改视频

视频取自w3schools和MDN

link 悬停时更改视频

Change video on link hover

javascript

gsap