onmouseover和onmouseout上闪烁的JavaScript图像

我试图做一个鼠标悬停弹出一个较大的图像的默认图像。但是，每当我将鼠标悬停在较小的图像上时，它会弹出，但当我将鼠标悬停在弹出图像上时，它会一直闪烁

下面是我的代码：

HTML:

---

您可以使用mouseenter和mouseleave，而不是mouseover和mouseout

因为一旦将鼠标移到DOM或其子DOM上，就会调用mouseover事件。因此，当您将鼠标移到更大的图像上时，可能会多次调用它

但是，对于mouseenter，只有当您进入DOM时，才会调用它，而不是它的子对象。当您将鼠标移到较大的图像上时，将不会调用它

var x=0；
var z=0；
函数myinterfunction（）{
document.getElementById（“demo2”）.innerHTML=x+=1；
}
函数myMoveFunction（）{
document.getElementById（“demo”）.innerHTML=z+=1；
}

div{
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
浮动：左；
填充：30px；
文本对齐：居中；
背景颜色：浅灰色；
}
p{
背景色：白色；
}

onMouseCenter:
鼠标悬停在我身上

onmousemove:
把鼠标移到我身上

您可以使用mouseenter和mouseleave，而不是mouseover和mouseout

因为一旦将鼠标移到DOM或其子DOM上，就会调用mouseover事件。因此，当您将鼠标移到更大的图像上时，可能会多次调用它

但是，对于mouseenter，只有当您进入DOM时，才会调用它，而不是它的子对象。当您将鼠标移到较大的图像上时，将不会调用它

var x=0；
var z=0；
函数myinterfunction（）{
document.getElementById（“demo2”）.innerHTML=x+=1；
}
函数myMoveFunction（）{
document.getElementById（“demo”）.innerHTML=z+=1；
}

div{
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
浮动：左；
填充：30px；
文本对齐：居中；
背景颜色：浅灰色；
}
p{
背景色：白色；
}

onMouseCenter:
鼠标悬停在我身上

onmousemove:
把鼠标移到我身上

您需要

将鼠标事件移动到包装div上

将它们更改为

onmouseenter

和

onmouseeve

---

这样，当您将鼠标悬停在任一图像上时，它仍处于“悬停”模式-并且与

onmouseover

不同，

onmouseinter

只触发一次（当您输入div时），因此当您将鼠标悬停在小图像上切换到大图像时，它不会重新触发。

您需要

将鼠标事件移动到包装div上

将它们更改为

onmouseenter

和

onmouseeve

---

---

这样，当您在任一图像上悬停时，它仍处于“悬停”模式-并且，与

onmouseover

不同，

onmouseinter

只触发一次（当您输入div时），因此当您从悬停在小图像上切换到大图像时，它不会重新触发。

自从编写本文以来，我发现它只成功了一部分

正如建议的那样，我在图中使用了mouseenter和exit，而不是图像。 在mouseenter上，我增加了图形的尺寸以突出显示。 把鼠标指针放在两个数字之间会不断闪烁，所以我试了一下 增加数字的边距，就停止了闪烁。 试错法给了我一个有效的解决方案，数字之间没有过多的差距。 看起来只有当您到达图形中的某个元素时，鼠标才能启动 也许使用focus可以提供更优雅的解决方案。

---

希望这对别人有所帮助

自从写这篇文章以来，我发现它只是成功的一部分

正如建议的那样，我在图中使用了mouseenter和exit，而不是图像。 在mouseenter上，我增加了图形的尺寸以突出显示。 把鼠标指针放在两个数字之间会不断闪烁，所以我试了一下 增加数字的边距，就停止了闪烁。 试错法给了我一个有效的解决方案，数字之间没有过多的差距。 看起来只有当您到达图形中的某个元素时，鼠标才能启动 也许使用focus可以提供更优雅的解决方案。

---

希望这对某人有所帮助

它会闪烁，因为当你将鼠标移到大图像上时-小图像不再被鼠标覆盖-因此大图像关闭-但现在它关闭了-小图像再次被鼠标覆盖-因此它会重新打开，等等。跳过所有这些，使用CSS。你也可以使用

transform:scale（3.5）

@Brad，可以说，如果我们不按比例放大悬停，而是按比例缩小，同样的问题也会发生：@kaido可以说，如果你在船底钻一个洞，你会把船弄沉，但问题不是这个，现在是吗？它会闪烁，因为当你将鼠标移到大图像上时-小图像不再被鼠标移到上面-所以大图像关闭-但现在它关闭了-小图像再次被鼠标移到上面-所以它会重新打开，等等。跳过所有这些，使用CSS。你也可以使用

transform:scale（3.5）

@Brad，可以说，如果我们不按比例放大悬停，而是按比例缩小，同样的问题也会发生：@kaido可以说，如果你在船底钻一个洞，你会把船沉下去，但问题不是这样的，是吗？从onmouseover改为onmouseentere，闪烁仍在发生。请尝试我的示例，当鼠标进入内部img时，将不会调用mouseenter句柄，但一旦移动到外部div或内部DOM上，将调用mouseenter句柄。并且可以将mouseenter事件绑定到包装器div。从onmouseover更改为onmouseenter，闪烁仍然会发生。试一下我的例子，当鼠标进入内部img时，将不会调用鼠标指针句柄，而是会调用mou

<div class="thumbnail" id="thumbnail1">
    <img src="image1.jpg" onmouseover="enlarge1()" onmouseout="minimize1()"/>            
</div>

function enlarge1() {
    var parent = document.getElementById("thumbnail1");
    var child = document.createElement("IMG");
    child.setAttribute("src", "image-large1.jpg");
    child.setAttribute("width", "350%");
    child.setAttribute("alt", "Related Large 1");
    child.style.position="absolute";
    child.style.zIndex="1";
    child.style.bottom="15%";
    child.style.left="30%";

    parent.appendChild(child);

}

function minimize1() {
    var parent = document.getElementById("thumbnail1");
    var child = parent.lastElementChild;
    parent.removeChild(child);
}

<div class="thumbnail" id="thumbnail1" onmouseenter="enlarge1()" onmouseleave="minimize1()">
    <img src="image1.jpg" alt=''>
</div>