0

我正在尝试构建像 Facebook 这样的图像上传系统，当您将鼠标悬停在图像上时，会出现一个按钮（一个 div，而不是实际的 html 按钮）来选择图像。到目前为止，我使用的是 jQuery 的悬停方法。问题是，当我将鼠标悬停在图像上时，会出现按钮，但是当我将鼠标悬停在按钮上时，该功能会假定我不再将鼠标悬停在图像上，并且按钮会消失。当然，既然按钮消失了，我再次将鼠标悬停在图像上并且按钮重新出现。当我在图像上移动鼠标时，最终结果就是这种闪烁效果。

我似乎无法找到解决方法。我尝试为按钮本身创建一个单独的悬停事件，该事件删除图像的悬停事件，然后在 mouseout 上替换它，但图像 mouseout 事件似乎首先触发，它什么也不做。

我唯一能想到的就是使用 setTimeout，但这似乎很草率。鉴于 Facebook 正在做类似的事情，我确信有一种超级干净的方式来处理它。

有什么想法吗？谢谢！

4

1 回答 1

1

尝试使用mouseenter()而不是 hover() 来处理冒泡

mouseenter 事件在处理事件冒泡的方式上与 mouseover 不同。如果在这个例子中使用了 mouseover，那么当鼠标指针移动到 Inner 元素上时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter 事件仅在鼠标进入它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标进入 Outer 元素而不是 Inner 元素时，会触发处理程序。

于 2012-07-20T23:30:05.447 回答