鼠标悬停播放声音

Posted 2023-02-25

【中文标题】鼠标悬停播放声音

【英文标题】：Play sound on mouse over

【发布时间】：2014-04-07 12:11:17

【问题描述】：

我将在鼠标悬停时在链接上添加声音，然后在鼠标移出时停止，当鼠标再次悬停时，声音将开始播放。

我即将把它放在链接上，但我不确定如何在我的链接上添加功能：

我做的第一件事是使用 javascript 在每个链接上添加音频。

$('<audio src="http://audiopath/kiss.ogg" id="mySound"></audio>').appendTo('a');

然后我添加了一个函数，可以在鼠标上播放我刚刚从另一篇文章中获得的音频。

function PlaySound(soundobj) 
    var thissound=document.getElementById(soundobj);
    thissound.play();
;

function StopSound(soundobj) 
    var thissound=document.getElementById(soundobj);
    thissound.pause();
    thissound.currentTime = 0;
;

我尝试在这些链接中添加一个功能，但我遇到了错误。我刚刚从其他帖子中读到它可以使用 attr 插入。

$('a').onmouseover(function()
    $(this).attr('PlaySound', ('mySound'));
);

$('a').onmouseout(function()
    $(this).attr('StopSound', ('mySound'));
);

我正在实现这样的输出：

<a onmouseover="PlaySound('mySound')" onmouseout="StopSound('mySound')" href="#">Hover Over Me To Play</a>

请大家帮忙.....

【参考方案1】：

试试这个，

$('a').hover(function()
    PlaySound('mySound');// calling playsound function
,function()
    StopSound('mySound');// calling stopsound function
);

并更改您的anchor tag 之类的，

<a href="#">Hover Over Me To Play</a>

【讨论】：

天啊！这样可行！当涉及到这样的复杂代码时，我仍然是菜鸟。非常感谢。

【参考方案2】：

改成这样：

$('a').on('mouseover', function()
    $(this).attr('PlaySound', ('mySound'));
);

$('a').on('mouseout', function()
    $(this).attr('StopSound', ('mySound'));
);

如果它不起作用，您可以尝试mouseenter 而不是鼠标悬停（请参阅the difference）。 mouseleave 与 mouseout 相同