JS用于鼠标悬停图像上传按钮(如Facebook）

JS for mouseover image upload button (like Facebook)

本文关键字：按钮 Facebook 用于鼠标悬停图像 JS 更新时间：2023-12-09

我正在尝试构建一个类似Facebook的图像上传系统，当你用鼠标悬停在图像上时，会出现一个按钮（div，而不是真正的html按钮）来选择图像。到目前为止，我使用的是jQuery的悬停方法。问题是，当我将鼠标悬停在图像上时，按钮会出现，但当我将光标悬停在按钮上时，函数会假设我不再将鼠标悬停于图像上，按钮就会消失。当然，由于按钮不见了，我再次在图像上悬停，按钮再次出现。当我在图像上移动鼠标时，最终的结果就是这种闪烁的效果。

我似乎想不出解决办法。我尝试为按钮本身创建一个单独的悬停事件，删除图像的悬停事件并在mouseout上替换它，但图像mouseout事件似乎首先启动，它什么也没做。

我唯一能想到的就是使用setTimeout，但这似乎很草率。鉴于Facebook也在做类似的事情，我相信有一种非常干净的方法来处理它

有什么想法吗？谢谢

尝试使用mouseenter（）而不是hover（）来处理冒泡

mouseenter事件与mouseover的处理方式不同事件冒泡。如果在本例中使用了mouseover，那么当鼠标指针移动到Inner元素上，处理程序将已触发。这通常是不可取的行为。鼠标输入事件，另一方面，只有当鼠标进入它绑定到的元素，而不是子代。因此，在本例中当鼠标进入Outer元素时会触发处理程序，但不会内部元素。