Question

我只需要在鼠标上更改一次图片。因此，当鼠标过度更改图片并停止时，永远不要回到默认图像，保留新图像。我需要这个，因为默认图像是gif动画，鼠标悬停是静态png pictire，当人们抓住鼠标第二个动画图片回来。至少要暂停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示例，显示它与警报一起使用。

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

仅在onmouseover上更改一次图片

2 个答案: