jquery 悬停进出答案

【问题标题】：jquery hover in and outjquery 悬停进出
【发布时间】：2011-10-25 11:00:42
【问题描述】：

我在一个列表中有 4 个框。我试图在悬停时将宽度设置为 100%。它可以很好地工作而无需将 float:left 设置为 li 元素。设置 float:left 时，悬停在右侧框上的悬停会在悬停时闪烁。

如果我将鼠标悬停在框 #2 上，则会闪烁。为什么会发生这种情况

【问题讨论】：

【解决方案1】：

当 li 被拉伸时，它不会与另一个 li 重叠，而是通过推动它为自己腾出空间。因此，当您将鼠标悬停在第二列上的 li 上时，它本身会被推送，因此您不再将鼠标悬停在它上面。

【讨论】：

【解决方案2】：

因为悬停时 div 被拉伸到 100%，它导致从 div1 以下开始。这会导致鼠标移出，因为鼠标没有悬停在 div 上...

【讨论】：

【解决方案3】：

当您将鼠标放在该框上时，将触发 mouseenter 并且将宽度设置为 100% 并且框位于下方，因此鼠标不再在其上方并且触发 mouseleave 因此宽度设置为 48% 并且框位于之前的位置仍然是鼠标光标，所以 mouseenter 被触发并且宽度设置为 100% 并且框低于 ...

【讨论】：

【解决方案4】：

这种行为是正常的。发生这种情况是因为当您将鼠标悬停在第二个框上时，该框不适合容器，因此它会下降到第二行（因此浮动以这种方式工作）。当盒子下降到第二行时，就像你停止将鼠标悬停在它上面一样，它会恢复到原来的大小和位置。然后它又回到原来的位置，你又将鼠标悬停在它上面，依此类推……这就是它闪烁的原因。

解决方案：使容器更宽，并使用固定的盒子。

【讨论】：