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 时），因此当您从悬停在小图像切换到大图像时，它不会重新触发图像。