JS for mouseover图片上传按钮（如Facebook）

我试图建立一个像Facebook的图像上传系统，当你mouseover图像，一个按钮（一个div，而不是一个实际的html按钮）出现选择一个图像。到目前为止，我正在使用jQuery的悬停方法。问题是，当我将鼠标悬停在图像上时，出现按钮，但是当我将鼠标悬停在按钮上时，该函数假定我不再悬停在图像上，并且按钮消失。当然，由于按钮消失了，我再次将鼠标悬停在图像上，并且该按钮重新出现。当我将鼠标移动到图像上时，最终的结果就是这种闪烁效果。JS for mouseover图片上传按钮（如Facebook）

我似乎无法找出解决办法。我试图为按钮本身创建一个单独的悬停事件，它为图像移除悬停事件，然后在鼠标移出时替换它，但图像鼠标事件似乎首先被触发，并且它什么都不做。

我唯一能想到的就是使用setTimeout，但这看起来很sl。。看到Facebook正在做类似的事情，我确信有一个超级干净的方式来处理它。

有什么想法？谢谢！

来源

2012-07-20 Stephen Corwin

尝试使用mouseenter()代替悬停（）来处理冒泡

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

来源

2012-07-20 23:30:05

使用mouseleave（）（与mouseenter（）相反）没有明确地解决我的问题，但它帮助我弄清楚了。我将该事件附加到图片标签本身，并且由于该按钮未包含为图片标签的子标签，因此不起作用。我最终将图像标记和按钮都包装在父div中，然后将一个mouseover事件附加到该THAT。不能相信我以前没有想过那个。问题解决！ – 2012-07-21 01:17:32

优秀，这是有道理的 – 2012-07-21 03:04:15

JS for mouseover图片上传按钮（如Facebook）

回答

相关问题