为什么 hover() 不能使用 jquery 处理添加的类？ [复制]

Question

我正在尝试延迟动画，对于这个任务，我在 500 毫秒后添加 .startAnimation 类用于动画。

HTML

<div class="layout">Hover It</div>
<div class="hoverDiv"></div> 

JS

setTimeout(function(){
            $(".layout").addClass('startAnimation');
        }, 500);
$('.hoverDiv').hide();
$('.startAnimation').hover(function(){
    $('.hoverDiv').show();
});

但问题是 hover() 不能与添加的类 .startAnimation 一起使用，但它与位于同一 div 上的 .layout 类一起使用。我检查了.startAnimation 类在 500 毫秒后正确添加。任何人都可以指导我解决这个问题，我可以解决它。我会很感激的。

这里是参考Demo

Answer 1

将事件委托与mouseenter、mouseleave 事件一起使用。

$(document).on('mouseenter mouseleave', '.startAnimation', function(){
    $('.hoverDiv').toggle();
});

DEMO

Answer 2

使用鼠标悬停事件而不是悬停。它会起作用的。

$(document).on('mouseover', '.startAnimation', function(){
    $('.hoverDiv').show();
});