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

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没有做到这一点,消除闪烁,引起删除和添加的跨度.

您可以在此处阅读有关差异的更多信息:

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