Javascript jquerymouseenter只是在闪烁img

我正在做一个项目，我想显示一个图像，当鼠标移动到图像上时，图像消失，页面上的信息出现。当鼠标移出元素时，图像将重新出现。我使用的是mouseenter和mouseleave，但是如果鼠标稍微移动，图像会一直闪烁

$（“.second div”）.mouseenter（函数（）{
$（此）.removeClass（“第二个div”）；
});
$（“.second div”）.mouseleave（函数（）{
$（此）.addClass（“第二分区”）；
});
。第一个div{
高度：200px；
宽度：300px；
边框：1px纯黑；
}
.第二组{
高度：200px；
宽度：300px；
边框：1px纯红；
位置：相对位置；
底部：201px；
背景图片：url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}
不需要JS或jquery，您可以使用CSS来实现这一点。只需将顶部元素的不透明度切换到
：hover


。第一个div{
高度：200px；
宽度：300px；
边框：1px纯黑；
}
.第二组{
高度：200px；
宽度：300px；
边框：1px纯红；
位置：相对位置；
底部：201px；
背景图片：url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
过渡：不透明度.25s；
}
.第二组：悬停{
不透明度：0；
}

内容
我同意CSS解决方案更好、更干净。但以下是我相信您试图通过jQuery实现的目标

在最初的问题中，您正在添加/删除导致鼠标事件不稳定触发的
第二个div
类


$（“.second div”）.mouseenter（函数（）{
$（“.second div”）.hide（）；
});
$（“.first div”）.mouseleave（函数（）{
$（“.second div”）.show（）；
});
。第一个div{
高度：200px；
宽度：300px；
边框：1px纯黑；
}
.第二组{
高度：200px；
宽度：300px；
边框：1px纯红；
位置：相对位置；
底部：201px；
背景图片：url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}

试试这个：


$（“#parentDiv”）.mouseenter（函数（）{
var hasDiv=$（“#secondDiv”）.hasClass（“second div”）.toString（）；
$（“#result1”）.html（“is hover:+hasDiv”）；
$（“secondDiv”）.removeClass（“secondDiv”）；
});
$（“#parentDiv”）.mouseleave（函数（）{
var hasDiv=$（“#secondDiv”）.is（“.secondDiv”）.toString（）；
$（“#result1”）.html（“is hover:+hasDiv”）；
if（hasDiv==“false”）
{
$（#secondDiv”）.addClass（“secondDiv”）；
}
});
#parentDiv{
宽度：300px；
高度：200px；
}
.第一组{
高度：200px；
宽度：300px；
边框：1px纯黑；
}
.第二组{
高度：200px；
宽度：300px；
边框：1px纯红；
位置：相对位置；
底部：201px；
背景图片：url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}

是悬停：
为什么您的演示与问题的代码不匹配？为什么要使用JS呢？可能是因为内容不见了，所以它就不见了，这就导致了请假……我更新了代码。抱歉复制了错误的演示。是的，这正是我想要的，我不知道为什么我没有尝试隐藏和显示。谢谢