我正在尝试在 javascript 中创建一个由 mouseover 事件触发的动画，然后在鼠标移出时返回到初始状态。当用户将光标移到页面上的图像上时，另一个初始高度为 0px 的 div 的高度逐渐上升到图像底部的 50px。
我面临的问题是，当他们将光标从图像移动到现在覆盖图像底部的 div 时，它会触发 mouseout（因为它是图像中的一个单独元素），然后是一个新的 mouseover 事件快速连续，因为当 div 检测到光标不再位于图像上时它会消失（这意味着 div 会一遍又一遍地快速出现和消失）。
我想知道如何打破这样的循环，以便当光标从图像上运行时 div 不会消失（即防止 onmouseout 事件触发，除非鼠标移动到不是新创建的其他元素分）。
这是一张希望能更好地说明问题的图片：
