HTML/CSS弹出抖动-图像弹出后立即弹出[已解决]

我想知道当用户将鼠标移动到页面上的某个位置时，如何防止弹出图像反复上下弹出（永远）

请参阅以说明问题。将鼠标悬停在文本

上方，抖动图像将出现
以查看抖动问题

编辑：由于这是最初发布的，我将解决方案合并到显示问题的代码中，现在它还显示了一个解决方案

细节
下面是对问题的文本描述，但是代码也说明了问题（并且用更少的文本）

在具有垂直滚动条的网页上

用户将鼠标移动到具有MouseEnterjavascript处理程序的div上


启动onMouseEnter事件，导致图像弹出


弹出窗口使滚动条滚动内容。现在，鼠标不再悬停在悬停项上，因此会触发MouseLeave事件，从而导致图像弹出


图像不再显示时，滚动条将内容移回弹出和中提琴之前的位置，鼠标位于div上方，再次触发MouseEnter事件以弹出图像


以浏览器能够跟上的速度，永远重复步骤2-4。
或者当用户移动鼠标停止弹出/弹出时

我在其他一些网站上看到过这种情况，现在这种情况发生在我身上，我想修复它，但我不知道如何修复

我一直在寻找解决方案，但还没有找到。以下是我找到的一些链接：

-这很好，但建议使用最小高度，这在我的情况下不起作用

我还尝试过使用overflow:hidden，它确实可以防止上面描述的抖动效果，但用户无法看到弹出图像的其余部分。然而，这是比上述抖动效应更好的解决方案

如果这会影响答案，我将使用AngularJS和JQuery。
图像上的位置：绝对，将解决此问题，因为当您显示图像时，它不会更改当前流，滚动条将保持在当前位置
 考虑在这里发布一篇文章，我已经添加了一个链接，指向一个演示问题（现在是解决方案）的示例。对于本例中出现的问题，我“强制”它发生。在一个更复杂的网页（我正在维护）中，我不知道是什么代码导致了问题。