javascript - 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 不会这样做，消除由删除和添加跨度引起的闪烁。

You can read more about the differences here :

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the Outer element, but not the Inner element.