javascript - 仅在鼠标悬停时更改图片一次

Question

我只需要在鼠标悬停时更改图片一次。因此，当鼠标悬停时 - 更改图片并停止，永远不会回到默认图像，保留新图像。我需要这个，因为默认图像是 gif 动画，鼠标悬停在静态 png 图片上，当人们按住鼠标时会返回第二张动画图片。鼠标移出操作时至少延迟 5 秒。

现在我使用这个javascript。

function onHover()
{
$("#menuImg").attr('src', 'images/mouseover_picture.png');
}

function offHover()
{
$("#menuImg").attr('src', 'images/default_picture.png');
}

html:

<img src="map.gif" id="menuImg" alt="info" width="415" height="380" usemap="#Europe" border="0" onmouseover="onHover();" onmouseout="offHover();" />

Answer 1

是的，您可以使用one() 处理程序仅触发一次。

$('#menuImg').one('mouseenter', function() {   
  $(this).attr('src', 'images/mouseover_picture.png');   
});

这是一个非常基本的 jsFiddle显示它与警报一起使用的示例。