將鼠標懸停在圖像上時的音頻

當觀看者將鼠標懸停在不同的圖像上時，我試圖播放多個音頻文件，並且我不希望在屏幕上顯示任何播放器/欄/功能，我只希望查看器將鼠標懸停在圖像上，並播放聲音，即使用戶將光標移開，它也會結束播放。我的所有圖像都被放置在apDiv標籤將鼠標懸停在圖像上時的音頻

$(function(){ 
    $('#apDiv3').hover(
    function() { $("killyou")[0].play(); }, 
    function() { $("killyou")[0].pause(); } 
    ) 
}); 


<audio id="killyou" controls preload="auto"> 
    <source src="iwilkillyou.mp3" type="audio/mpeg"></source> 
    <div id="apDiv3"> 
     <img src="explosion_by_dbszabo1-d3hmssu.png" width="175" height="5"> 
    </div> 
</audio>

我得到了這個懸停時工作，它播放聲音，但我不能使用它的多張圖片，當鼠標從移開聲音停止圖像，這是我第一次使用HTML和JQuery，任何人都可以幫助我解決這個問題？謝謝！

來源

2013-04-08 bunzbox

請發佈您的完整HTML代碼。 – Eli 2013-04-08 07:56:21

（編輯：重讀你的問題）

也許：

$('.audio-source img').mouseover(function() { 
    $('player source').attr('src', $(this).data('file')) 
      .parent()[0].play(); 
});

隨着HTML：

<audio hidden id="player" controls preload="auto"> 
    <source src="default-audio.mp3" type="audio/mpeg"></source> 
</audio> 
<div class="audio-source"> 
    <img data-file="foo.mp3" src="image-1.png"/> 
    <img data-file="bar.mp3" src="image-2.png"/> 
    <img data-file="baz.mp3" src="image-3.png"/> 
</div>

我目前無法測試，雖然。

jQuery函數.hover(on, off)綁定兩個函數，一個用於鼠標懸停，一個用於鼠標懸停。所有你需要的是鼠標，所以你可以使用功能.mouseover(function)。 jQuery代碼片段的功能是從鼠標懸停的圖像中獲取data-file屬性，並將其應用於<source>標記的src屬性。然後我們獲取父節點，即<audio>標記，並在DOM節點上調用play()。

來源

2013-04-08 08:09:49 azz

將鼠標懸停在圖像上時的音頻

回答

相關問題