gpt4 book ai didi

html - 如何在HTML中将鼠标悬停在图像和声音上

转载 作者:行者123 更新时间:2023-12-03 02:34:08 24 4
gpt4 key购买 nike

这是一个非常简单的问题,但是我很困惑如何使HTML生效。
我已经设置了所有JavaScript,一切都准备就绪,但是我不知道如何使HTML正常工作。

这就是我所拥有的

<div id="door"> 
<a href="inspect/squishdoor.html" onmouseover="document.door.src='storyimages/buttons/doorlarge.png'", "mouseoversound.playclip()" onmouseout="document.door.src='storyimages/buttons/doorlargeinv.png'">
<img src="storyimages/buttons/doorlargeinv.png" name="door"></a>
</div>`

我希望它显示图像并播放声音,如果我选择一个或另一个,它会这样做,但是如果它们彼此相邻,那是行不通的。

最佳答案

您可以使用以下代码:

var $audio = $("audio_element"); //caching

$("object_element_id") .on ('mouseover', function(e){
$audio.play();
});

$("object_element_id") .on ('mouseout', function(e){
$audio.stop();
});

或者只是这个
var audio = $("#audio");
$("play a").mouseenter( function() {
audio.play();
}

音频是该音频元素,播放a是悬停的元素。

以及如何添加这些功能。有一个例子

码:
<!DOCTYPE html> 
<html>
<body>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<br>
<video id="video1">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

<script>
var myVideo=document.getElementById("video1");

function playVid()
{
myVideo.play();
}

function pauseVid()
{
myVideo.pause();
}
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck
Bunny</a>.
</p>

</body>
</html>

关于html - 如何在HTML中将鼠标悬停在图像和声音上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23788177/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com