.hover和div出现干扰

Question

我正在创建一个书签，它会在用户点击时从用户所在的页面上传图像，到目前为止一切顺利，但我遇到了碰撞。

我想要发生的是，

1. 用户点击书签
2. 用户将鼠标悬停在页面上的图像上。
3. 在hover上显示div
4. 点击div时会将其带到我的网站。

但是看起来与.hover混淆的div，它来回地断断续续。我猜这是因为从技术上讲，用户不再在图像上盘旋，而是在我创建的div上。

这是一个例子。 http://jsfiddle.net/P4b8H/

我怎么能解决这个问题？

Answer 1

这里的问题是，当你的div被创建时，你总是离开图像，即悬停。但是在悬停功能中你隐藏了div，所以你有点陷入无限循环。

要解决此问题，请考虑在图像上使用鼠标悬停，在div 上使用mouseout 。

$("img").mouseover(function(){});

$('#WRAPPER').mouseleave(function() {});

我修改了你的小提琴。 http://jsfiddle.net/P4b8H/5/

Answer 2

将图像放在一个框中。将div附加到同一个框中。然后将悬停事件再次应用到同一个框中。看看改变的小提琴 - http://jsfiddle.net/P4b8H/4/