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

Question

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

现在我使用这个 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 示例，显示它与警报一起使用。

Answer 2

对于 jQuery，您可以使用 .one() 函数仅触发一次事件。

jsFiddle

$('#menuImg').one('mouseover', function () {
    $(this).attr('src', 'https://www.google.com.au/images/srpr/logo4w.png');
});

作为纯 JS 解决方案，通过将 null 分配给它来分离事件处理程序。

jsFiddle

var img = document.getElementById('menuImg');
img.onmouseover = function () {
    this.setAttribute('src', 'https://www.google.com.au/images/srpr/logo4w.png');
    img.onmouseover = null;
};