元素覆盖目标元素时mouseover事件闪烁问题的解决方法

我来帮你搞定这个闪烁问题！咱们先搞清楚为啥会闪：

你现在把事件绑在了instrument图片上，当弹出的edit元素显示后，它是在图片的上层。这时候你把鼠标移到edit上，相当于鼠标离开了instrument，就会触发mouseleave隐藏edit；可edit一隐藏，鼠标又回到了instrument上，立刻触发mouseover再次显示edit——这么来回切换，可不就闪烁了嘛！

接下来给你两种靠谱的解决办法：

方法一：把事件监听加到父容器上 #

父容器parent包含了图片和弹出层，鼠标只要在父容器范围内（包括两个子元素），都不会触发mouseleave，完美避免切换问题。

修改后的JS代码：

var parent = document.querySelector(".parent");
parent.addEventListener("mouseenter", function() {
  toggleEdit(true);
})
parent.addEventListener("mouseleave", function() {
  toggleEdit(false);
})

var edit = document.getElementById("edit");
var i = 0;
function toggleEdit(isShow) {
  console.log(i++);
  edit.className = edit.className.replace(" hide", "");
  if (!isShow) {
    edit.className += " hide";
  }
}

方法二：优化类名操作逻辑（配合方法一效果更好） #

你原来的类名替换方式有点容易出问题，推荐用classListAPI来操作类名，更简洁可靠：

function toggleEdit(isShow) {
  console.log(i++);
  if (isShow) {
    edit.classList.remove("hide");
  } else {
    edit.classList.add("hide");
  }
}

验证一下效果：当鼠标进入父容器（图片区域）时，弹出层显示；鼠标完全移出父容器时，弹出层隐藏，中间不管鼠标在图片还是弹出层上，都不会再出现闪烁的情况。

内容的提问来源于stack exchange，提问作者MyDaftQuestions