Javascript 当元素高于目标元素时鼠标悬停不工作

我正在学习鼠标事件。目前，我的目标是拥有。例如，将鼠标移到图像上，会看到一个弹出窗口。将鼠标移开时，弹出窗口将消失。我觉得这是很平常的事情

因为我前面有一张图片，我的研究表明我需要使用

mouseleave

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

这个片段显示了一切

var inst=document.getElementById（“仪器”）；
inst.addEventListener（“鼠标悬停”，函数（）{
切换编辑（真）；
})
inst.addEventListener（“mouseleave”，函数（）{
切换编辑（假）；
})
var edit=document.getElementById（“编辑”）；
var i=0；
功能切换编辑（isShow）{
console.log（i++）；
edit.className=edit.className.replace（“隐藏”、“替换”）；
如果（！isShow）{
edit.className+=“隐藏”；
}
}

.parent{
位置：相对位置；
左缘：40%；
背景：绿色；
}
.image1{
位置：绝对位置；
排名：0；
左：0；
}
.image2{
位置：绝对位置；
顶部：0px；
}
.image2 img{
最大宽度：20px；
}
.隐藏{
可见性：隐藏；
显示：块；
}

你根本不需要JS。只需使用CSS，使用

：hover

.parent{
位置：相对位置；
左缘：40%；
背景：绿色；
}
.父对象：悬停。图像2{
可见性：可见
}
.image1{
位置：绝对位置；
排名：0；
左：0；
}
.image2{
位置：绝对位置；
顶部：0px；
可见性：隐藏；
}
.image2 img{
最大宽度：20px；
}

---

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

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

---

你根本不需要JS。它可以通过CSS使用

：hover

。。。。它可以@JeremyThille？我不认为一个元素上的悬停事件会影响CSS中另一个元素的样式？大多数弹出窗口实际上并不是在另一个元素上移动的不同元素或图像。正如Jeremy所说，它们只是css中的更改，所以元素永远不会更改。css中有相邻的子选择器。否则，将悬停事件放在两个元素的父元素上<代码>父项：悬停childIdentifier。那么它是如何工作的？是因为中间的元素（在链接中的中间例子）不是图像吗？我已经使用CSS好几年了，从来没有意识到我可以把：悬停在那个位置……我只做过：悬停作为最后一个条目。这是令人惊讶的想象你明天会知道什么：）另外，如果你认为答案值得的话，请不要忘记验证它。那么就足够公平了。虽然这并不能回答问题，但我感觉我可能在我所做的事情中使用了错误的技术-CSS是更好的选择，因此我会将此标记为答案