当元素高于目标元素时，鼠标悬停不起作用

Question

我正在学习鼠标事件。目前，我的目标是拥有2 images on top of each other。例如，您将鼠标移到图像上并看到一个弹出窗口。当您将鼠标移开时，弹出窗口就会消失。我认为这是很常见的事情。

因为我有一个图像在另一个前面，我的研究表明我需要使用mouseleave

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out

我遇到的问题是，当我尝试隐藏或删除隐藏类（使图像可见或不可见）时，我得到了闪烁效果

这个 sn-p 显示一切

var inst = document.getElementById("instrument");
inst.addEventListener("mouseover", function() {
  toggleEdit(true);
})
inst.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";
  }
}

.parent {
  position: relative;
  margin-left: 40%;
  background: green;
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 0px;
}

.image2 img {
  max-width: 20px;
}

.hide {
  visibility: hidden;
  display: block;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/100" id="instrument" />
  <a id="edit" href="#" class="image2 hide"><img src="https://cdn.pixabay.com/photo/2017/06/06/00/33/edit-icon-2375785_960_720.png" /></a>
</div>

JSFIDDLE

如何防止这种闪烁？

Answer 1

这对我来说似乎是预期的行为。一旦将鼠标悬停在小图像上，理论上它就不会在大图像上，因此小图像会消失。当这种情况发生时，鼠标悬停效果会在大图像上再次触发，将其置于“循环”中。您可以在小图像中添加相同的逻辑来解决您的问题，但如上所述，更简单的方法是使用 css。

var inst2 = document.getElementById("edit");
inst2.addEventListener("mouseover", function(){toggleEdit(true);})
inst2.addEventListener("mouseleave", function(){toggleEdit(false);})

Answer 2

你根本不需要 JS。它可以通过使用:hover的CSS来实现

.parent {
  position: relative;
  margin-left: 40%;
  background: green;
}
.parent:hover .image2{
    visibility: visible
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 0px;
  visibility: hidden;
}

.image2 img {
  max-width: 20px;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/100" id="instrument" />
  <a id="edit" href="#" class="image2">
    <img src="https://cdn.pixabay.com/photo/2017/06/06/00/33/edit-icon-2375785_960_720.png" />
  </a>
</div>