Question

这是一个非常简单的问题，但我很难理解如何让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>`

我希望它能够显示一个图像并播放声音，如果我选择其中一个，它会发生这种情况，但如果它们彼此相邻，它就无法工作。

Answer 1

您可以使用此代码：

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();
}

音频是音频元素，播放是悬停的元素。

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

CODE：

<!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中将鼠标悬停在图像和声音上

1 个答案: