JavaScript 图像在 onmouseover 和 onmouseout 时闪烁

Question

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

下面是我的代码:

HTML:

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

JS:

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

Answer 1

你需要...

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

2. 将它们更改为 onmouseenter 和 onmouseleave

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

---

这样，当您将鼠标悬停在任一 图像上时，它仍处于“悬停”模式 — 并且，与 onmouseover 不同，onmousenter 仅触发一次(当您进入 div 时)，因此当您从悬停在小图像上切换到大图像时它不会重新触发。