光標懸停時播放音樂

當光標懸停在圖像上時，我可以播放音樂。我只做了一個圖像。今天，我嘗試用另一首歌曲放入另一張圖片。沒有奏效 - 第二張圖像播放與第一張圖像相同的歌曲，即使我放了不同的曲目。這裏是我的代碼：光標懸停時播放音樂

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

來源

2015-10-04 C.L.

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

});

如果你需要更多的幫助，這樣做的話，請發表評論。

來源

2015-10-04 23:14:53 OliverRadini

光標懸停時播放音樂

回答

相關問題