Question

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

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

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

编辑：想通了。 D'哦。添加的内容出现在鼠标下。

Answer 1

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

解决此问题的一种方法是使用图像作为父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;
}

jQuery mouseenter，mouseleave和append的奇怪组合

1 个答案: