Question

HTML：

<div id="timerList">
...
    <li rel="project" class="open">
        <a class="" style="" href=""><ins>&nbsp;</ins>Project C</a>
    </li>
...
</div>

javascript / jquery：

$('#timerList li[rel="project"]').mouseover(function(){
    $('a:first',this).after('<span class="addNew"><a href="#">Add Timer</a></span>');
}).mouseout(function(){
    $('.addNew',this).remove();
});

当我将鼠标悬停在li元素上时，会在

中创建span.addNew元素

问题：当我把我的鼠标放在span.addNew上时，它会一直闪烁。也许mouseout事件正在触发，但我不明白它为什么会或如何阻止它。

谢谢！

Answer 1

您可以使用.hover()功能，如下所示：

$('#timerList li[rel="project"]').hover(function(){
    $('a:first',this).after('<span class="addNew"><a href="#">Add Timer</a></span>');
}, function(){
    $('.addNew',this).remove();
});

.hover()与使用.mouseenter()和.mouseleave()相同。输入子元素时会导致mouseover和mouseout事件，使用mouseenter和mouseleave不会执行此操作，从而消除因删除和添加范围而导致的闪烁。

You can read more about the differences here：

mouseenter事件处理事件冒泡的方式与mouseover不同。如果在此示例中使用了mouseover，那么当鼠标指针移过Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter事件仅在鼠标进入其绑定的元素而不是后代时触发其处理程序。因此，在此示例中，处理程序在鼠标进入外部元素时触发，而不是内部元素。

Answer 2

可能会发生这种情况，因为jquery不知道你的新元素是DOM的一部分，因此无法识别鼠标悬停。我不确定，但在这种情况下你可能需要jquery的live。

或者，您可能需要预先创建此元素，而不是创建此元素然后将其删除，而是设置display：none。然后隐藏/取消隐藏元素。

鼠标悬停/外出时jquery奇怪的闪烁

2 个答案: