jQuery 悬停不会破坏 $.each 循环答案

【问题标题】：jQuery hover doesn't break $.each loopjQuery 悬停不会破坏 $.each 循环
【发布时间】：2012-08-08 19:51:44
【问题描述】：

我目前正在为我的第一个网站制作动画，可在此处找到：http://jsfiddle.net/thevenin/zRLFX/4/

总结：我有五个递归动画的 div，带有一个 $.each() 函数来启动动画。如果您将鼠标悬停在五个 div 中的任何一个上，则动画应该会中断，并且所有 div 都应该停止移动。当您悬停 div 时，动画会使用 $.each() 函数重新开始。

我的问题是，有时当 div 到达内部圆的对角轴时，hover() 函数不会触发。如果您在此位置将鼠标移动到 div 上，鼠标将悬停在 div 上而不会被注册。 Firefox 和 Chrome 都有这个问题。我该如何解决这个问题？

谢谢！

【问题讨论】：

【解决方案1】：

悬停需要您将鼠标实际移动到悬停的对象上。因为您的对象是动画的，所以如果您只是将鼠标固定在对象的路径中，则不会触发悬停。

我怀疑如果您将鼠标移向一个圆圈也会发生这种情况，但在鼠标到达圆圈之前停止，然后圆圈在其下方动画，而不是触发悬停。

为了规避这种行为，您可以改为轮询鼠标坐标以查看它们是否在任何给定时间的圆圈范围内。

【讨论】：

我相信海报的意思还有另一种情况。尝试在其中一个 div 位于紫色 div 中心的对角轴上时输入它们。悬停将被忽略。我相信这是提问者真正关心的问题。虽然跟踪 div 会突然导致正确的检测。但我确实喜欢你关于跟踪鼠标坐标的建议。
@Derija93 感谢您指出这发生在对角轴上。您将如何轮询相对于圆位置的鼠标坐标？
虽然 jQuery 有简单的 mouseMove 事件，但您可以检查 pageX/clientX 为 described here。我的想法是，每当鼠标移动或其他频率时，更新一个包含你的圆圈位置的数组，然后比较两者。
@Rocketeer 这不会那么容易。当然，不可能绘制相对于圆的鼠标坐标，而是相对于文档原点。然后，您必须使用数学公式检查鼠标是否在其中一个圆圈内。但为了节省性能，我建议检查鼠标是否靠近其中一个圆圈，然后计算它是否在圆形范围内。
遍历这个：首先找到所有圆圈和鼠标光标的绝对位置，然后使用数学来确定光标是否在一个圆圈内。那是对的吗？另外，首先是什么导致了这个悬停问题？

【解决方案2】：

通过增加圆圈的 z-index 解决了这个问题。我之前猜想，问题可能是由于 div 与其他所有内容的 z-index 相同，这意味着您将无法选择它们。不太确定实际的推理，但至少它有效！

【讨论】：