jQuery mouseenter、mouseleave 和append 的奇怪组合

Question

在将 jQuery 的 mouseenter 和 mouseleave 事件与对 append 的调用相结合时，我遇到了一个有趣的问题。我的目标是当鼠标进入某些内容时显示额外的内容，然后在鼠标离开时删除它。这与将鼠标悬停在 StackExchange 上的标签上时发生的情况非常相似。顺序是：

• 在 mouseenter 中，创建内容并通过 .offset 和 .append 将其定位在鼠标下方的元素上。
• 在 mouseleave 中，从屏幕上删除该内容。

我正在操作的元素是 img，我使用的是 jQuery 1.6.2。问题在于 .append 以某种方式触发了 mouseleave，而 .mouseenter 很快就会紧随其后，如此循环往复。它在添加的内容上显示出奇怪的闪烁效果，因为它被反复删除和重新添加。请参阅此处关于 jsFiddle 的示例。为什么会发生这种情况？我该如何解决？

编辑：弄清楚了。噢。添加的内容出现在鼠标下方。

Answer 1

发生这种情况的原因是您在鼠标所在的位置添加了内容。新内容不是原始元素的一部分，因此根据定义，当您显示新 DIV 时，鼠标不再位于 IMG 上。

解决此问题的一种方法是使用图像作为父 DIV 的背景，然后将新 DIV 附加到父 DIV，以便新 DIV 成为父 DIV 的子项。

顺便说一句，您选择不使用 .hover() 是否有原因？

这是一个有效的 jsfiddle 来说明我如何做到这一点。

HTML：

<div class="papa">
    <div class='myDiv'>
        <div id='divHover'>Hello World</div>
    </div>
</div>

Javascript/Jquery：

$(document).ready(function() {
    $(".papa").hover(
      function () {
        $(".myDiv").show();
      },
      function () {
        $(".myDiv").hide();
      }
    );
});

CSS：

.papa {
    background-image:url('http://dummyimage.com/100x100/000/fff');
    height: 100px;
    width: 100px;
}
.myDiv {
    display: none;
    height: 30px;
    border: 1px solid black;
}
#divHover {
    width:100px;
    height:20px;
    background-color:white;
    border:1px solid black;
    position: relative;
    top: 10px;
    left: 10px;
}