Question

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

<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>

Answer 1

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

我建议不要使用表格，并使用jquery来加快速度。这是一些示例代码：

https://jsfiddle.net/amq2w00g/

这是javascript代码，这不是太复杂：

$( document ).ready(function() {

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

});

如果您需要更多帮助，请发表评论。

光标悬停时的音乐播放

1 个答案: