带有模态弹出的mouseenter触发mouseout

Question

我在div中用JS显示了很多图片。输入（mouseover）图片时，屏幕中央会显示一个模态，其中包含放大的图片。当原始图片中的mouseout时，模态设置为display: "none"。这对于屏幕中间的图片来说非常有用， exept ：模态显示原始图片的 ontop ，强制mouseout，然后，由于模态已经消失，原始图片再次被mouseover触发，触发模态，依此类推。这导致模式闪烁;开，关，开，关，开，关...

function showBigImg(e) {
var picToShow = e.target.src;
if (picToShow !== replacePic) {
    document.getElementById("insertPic").src = picToShow;
    document.getElementById("modal").style.display = "block";
   }
}


function showSmallImg() {
document.getElementById("modal").style.display = "none";
}

有关如何解决这个问题的任何建议吗？