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

Posted 2023-02-25

【中文标题】将鼠标悬停在图像上时的音频

【英文标题】：Audio when hover over an image

【发布时间】：2013-04-08 07:53:28

【问题描述】：

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

我让它在悬停时工作，它会播放声音，但我不能将它用于多个图像，并且当鼠标移离图像时声音停止，这是我第一次使用 html 和 JQuery，任何人都可以帮我解决这个问题？谢谢！

【问题讨论】：

请发布您的完整 HTML 代码。

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