悬停

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>

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

2 个答案:

悬停

在进入/离开