jquery - jQuery-鼠标悬停时声音无法正常工作

Question

我正在为 children 创建一个网站，我希望当有人将鼠标悬停在会播放声音的链接上时。

这是我的代码-

<audio id="hoverA">
  <source src="files/sound/hover-01.mp3" type="audio/mpeg">
</audio>

jQuery代码-

var hoverA = document.getElementById("hoverA");
$(document).ready(function(){
  $(".navbar .nav-link").mouseover(function(){
    hoverA.play();
  });
});

仅当我首先在页面上执行某些 Activity (如单击键盘，单击鼠标等)时，声音才能正常播放。
刷新后它停止工作，仅在我再次进行一些 Activity 时才播放。

Answer 1

当有人开始将鼠标悬停在链接上时，根据您确切想要进行的操作，我建议使用jQuery两种方法。对于将来的读者或引用，我认为将这两个jQuery功能放下都是有用的。

徘徊

使用jQuery内置的.hover函数。您可以在JSFiddle here.上看到类似的示例

var hoverA = document.getElementById("hoverA");
$(document).ready(function() {
    $(".navbar .nav-link").hover(function () {
        hoverA.play();
    });
});

进入/离开

如果您希望它从输入区域或离开区域开始。

var hoverA = document.getElementById("hoverA");
$(document).ready(function() {
        $(".navbar .nav-link").mouseenter(function () {
            hoverA.play();
        }).mouseleave(function ()
        {
            hoverA.play();
        });
});

我相信使用.hover函数会效果最好，因为与.mouseover一样，我认为它需要首先注册用户交互。

希望这会有所帮助! :)

编辑1:

检查后，出现在浏览器问题中，如类似SO post here中所述。它指出:

I was working in the responsive mode of the browser... apparently it then doesn't fire the mouseover/mouseout events

这似乎是在jQuery中触发事件的问题。