2

我只需要在鼠标上更改一次图片。因此，当鼠标悬停时 - 更改图片并停止，永远不要回到默认图像，保留新图像。我需要这个，因为默认图像是 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();" />
4

2 回答 2

4

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

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

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

于 2013-03-29T16:13:12.373 回答
3

对于 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;
};
于 2013-03-29T16:17:37.417 回答