javascript：无意的反馈循环答案

【问题标题】：javascript: unintentional feedback loopjavascript：无意的反馈循环
【发布时间】：2012-07-21 08:54:53
【问题描述】：

我正在尝试在 javascript 中创建一个由 mouseover 事件触发的动画，然后在鼠标移出时返回初始状态。当用户将光标移动到页面上的图像上时，另一个初始高度为 0px 的 div 的高度逐渐上升到图像底部的 50px。

我面临的问题是，当他们将光标从图像移动到现在覆盖图像底部的 div 时，它会触发 mouseout（因为它是图像中的一个单独元素），然后是一个新的mouseover 事件快速连续，因为当检测到光标不再在图像上时，div 消失（意味着 div 快速出现和消失，一遍又一遍）。

我想知道如何打破这样的循环，以便当光标从图像上移过它时 div 不会消失（即防止 onmouseout 事件触发，除非鼠标移动到其他一些不是新创建的 div)。

这是一张希望能更好地说明问题的图片：

【问题讨论】：

【解决方案1】：

我认为对于这种情况，您需要在图像和您正在制作动画的 div 周围使用包装器 div。将 mouseover/mouseout 事件附加到包装器上，它们将在您期望它们时触发。 Here's a jsfiddle example

【讨论】：