当光标悬停在图像上时，我能够播放音乐。我只为一张图片做了这件事。今天，我试着用另一首歌放另一张图片。没有用 - 第二张图片播放与第一张图片相同的歌曲，即使我放了不同的轨道。这是我的代码:
<head>
<link rel="stylesheet" type="text/css" href="hovermusic.css">
</head>
<body>
<script src="hovermusic.js"> </script>
<audio id="hoversound" src="LanaSummertimeSadness.mp3"></audio>
<button onmouseover="document.getElementById('hoversound').play()" onmouseout="document.getElementById('hoversound').pause()"><h1 class="handbags"> <center> Handbag Edition </h1>
</center>
<h3 class="chloe"> <center> Bags </center> </h3>
<div class="handbags">
<center>
<table style="height:100">
<td> <a href="http://www.a-land.co.kr/shop/main/index.php"> <img src="http://i1.wp.com/www.cachetdechloe.com/wp-content/uploads/2015/09/DSC_0092.jpg?resize=600%2C399" title="Backpack with Patches"
<figcaption>
<center>First Day of School</center>
</figcaption></button>
</a> </td> </center> </div>
<audio id="hovermusic" src="BlueJeansPreview.wav"></audio>
<div class="photo2">
<center>
<table style="height:100">
<td onmouseover="document.getElementById('hovermusic').play()" onmouseout="document.getElementById('hovermusic').pause()">
<a href="http://www.cachetdechloe.com"> <img src="http://i1.wp.com/www.cachetdechloe.com/wp-content/uploads/2015/08/DSC_0175.jpg" title="Gold For the Win"
<figcaption>
<center>HK Summer 2015</center>
</figcaption></button>
</a> </td> </center> </div>
</body>
最佳答案
正如其他人所说，您的 HTML 有点乱，如果不看 css 就很难确切知道发生了什么。
我建议不要使用表格，而是使用 jquery 来加快速度。下面是一些示例代码:
https://jsfiddle.net/amq2w00g/
这是javascript代码，并不太复杂:
$( document ).ready(function() {
$(".audio-box").mouseover(function(){
var thisAudio = $(this).find("audio");
thisAudio[0].play();
});
});
如果您需要更多帮助，请发表评论。
关于javascript - 光标悬停时播放的音乐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32939155/