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

Question

当查看器悬停在不同的图像上时，我正在尝试播放多个音频文件，并且我不希望任何播放器/栏/功能显示在屏幕上，我只希望查看器将鼠标悬停在图像上，并且声音播放时，即使用户将光标移开，它也会完成播放。我所有的图像都被放置在 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，任何人都可以帮助我有了这个？谢谢!

Answer 1

(编辑:重新阅读您的问题)

也许:

$('.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)绑定(bind)两个函数，一个用于鼠标悬停，一个用于鼠标关闭。您只需要打开鼠标，即可使用.mouseover(function) 功能。 .
jQuery 片段所做的是获取 data-file将鼠标悬停在图像上的属性，并将其应用于 src <source> 的属性标签。然后我们抓取父节点，即<audio>标记，并调用 play()在 DOM 节点上。