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

Question

我正在为孩子们制作一个网站，我希望当有人将鼠标悬停在播放声音的链接上时。

这是我的代码-

<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();
  });
});

只有当我首先在页面上进行一些活动（如点击键盘、点击鼠标等）时，声音才能正常播放。 刷新后它停止工作，只有当我再次做一些活动时才播放。

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 帖子 here 中所述。它指出：

我在浏览器的响应模式下工作......显然它 然后不会触发 mouseover/mouseout 事件

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

Answer 2

我希望这会有所帮助：css-tricks.com

var beepOne = $("#beep-one")[0];
$("#nav-one a")
	.mouseenter(function() {
		beepOne.play();
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="nav-one" class="nav">
		   <li>
		   	<a href="#">Item 0</a>
		   	<audio id="beep-one" preload="auto">
				<source src="http://codeskulptor-demos.commondatastorage.googleapis.com/descent/gotitem.mp3"></source>
				<source hrfe="http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"></source>
				Your browser isn't invited for super fun time.
			</audio>
			</li>
		   <li><a href="#">Item 1</a></li>
		   <li><a href="#">Item 2</a></li>
		   <li><a href="#">Item 3</a></li>
		</ul>