将鼠标悬停在图像上时的音频

当观看者将鼠标悬停在不同的图像上时，我试图播放多个音频文件，并且我不希望在屏幕上显示任何播放器/栏/功能，我只希望查看器将鼠标悬停在图像上，并播放声音，即使用户将光标移开，它也会结束播放。我的所有图像都被放置在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

将鼠标悬停在图像上时的音频

回答

相关问题