Javascript 如何将事件附加到另一个对象所覆盖的对象？

当鼠标指针进入它的同级图像时，我试图取消隐藏一个div，当它离开时隐藏它。但事实上，当我在图像上移动鼠标指针时，它就开始闪烁

image和div的大小相同

HTML代码：

我喜欢在这家公司工作，一切都很好

JS代码：

var entertimes = 0;
$(".o_p_faces_e img").mouseenter(function(){
    if(entertimes==0) {
    var glassON = $(this).next();
    glassON.removeClass("o_p_faces_e_glass_off");
    glassON.addClass("o_p_faces_e_glass_on");
    entertimes++;
    }
});

$(".o_p_faces_e img").mouseleave(function(){
    if(entertimes==1) {
    var glassOFF = $(this).next();
    glassOFF.removeClass("o_p_faces_e_glass_on");
    glassOFF.addClass("o_p_faces_e_glass_off");
    entertimes--;
    }
})

CSS代码：

.o\u p\u面\u e img{
位置：绝对位置；
排名：0；
左：51px；
边框：5px实心#f7ec16；
边界半径：50%；
显示：块；
左边距：自动；
右边距：自动；
}
.o_p_面_e_玻璃_{
显示：无；
光标：指针；
}
.o_p_面_e_玻璃_上{
位置：绝对位置；
左：56px；
顶部：5px；
宽度：330px；
高度：330px；
背景色：rgb（252247156,0.7）；
显示：块；
左边距：自动；
右边距：自动；
边界半径：50%；
光标：指针；
溢出：隐藏；
过渡：所有1都放松；
}

两者都可以添加到同一个div，如下所示：

$(".o_p_faces_e img").mouseenter(function() {
    //mouse enter code
}).mouseleave(function() {
    //mouse leave code
});

---

请提供一份报告。如果看不到使用了什么css和类的变化，就很难知道是什么问题。我提供了我的css代码，请查看。@ArmanGrigoryan最好想想是什么导致了这个问题。当鼠标进入图像时，将显示其同级。当该同级显示时，它会显示在图像前面，从而导致鼠标离开图像并进入同级。这会在图像上导致mouseleave事件，从而隐藏兄弟节点。隐藏兄弟姐妹时，鼠标离开兄弟姐妹，然后进入图像，从而以无限循环再次显示兄弟姐妹。只需将事件上移到包含这两个元素的元素，它就不会闪烁。非常感谢Kevin！我只是简单地将事件上移到父元素，正如您所说，它包含了这两个元素，而且它真的很有效！我已经挣扎了几个小时。。。再次感谢您的帮助。您的解释非常清楚，我明白了！呃，如果它实际上是针对父div，并且对事件目标有一些条件，那么这可能会起作用。但它不起作用。它不起作用，div仍然在图像上闪烁，它在打开和关闭o_p_faces_e_glass_faces_faces_e_glass_类之间快速切换。由于“ON”类具有“display:block”css属性，“OFF”类具有“display:none”属性，因此它看起来像是闪烁（或闪烁，我不知道如何解释，因为我的英语不是很好）。