光标悬停时播放音乐

问题描述：

当光标悬停在图像上时，我可以播放音乐。我只做了一个图像。今天，我尝试用另一首歌曲放入另一张图片。没有奏效 - 第二张图像播放与第一张图像相同的歌曲，即使我放了不同的曲目。这里是我的代码：光标悬停时播放音乐

<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看起来坏了。关闭第一个td后，两个表都没有关闭，第二个也没有创建另一个td。你可以尝试修复表格，看看它是否有效？你的按钮里还有表格。它看起来完全无效。 – Lewis

你可以把一些连接到音频的css（如果是）。 –

答

正如其他人所说，你的HTML是有点混乱，很难确切地知道发生了什么，没有看到CSS。

我建议不要使用表格，并使用jQuery来加快一点。下面是一些示例代码：

https://jsfiddle.net/amq2w00g/

这里是JavaScript代码，这是没有什么太复杂：

$(document).ready(function() { 

    $(".audio-box").mouseover(function(){ 
     var thisAudio = $(this).find("audio"); 
     thisAudio[0].play(); 
    }); 

});

如果你需要更多的帮助，这样做的话，请发表评论。

光标悬停时播放音乐

相关推荐