如果鼠标仍然在元素上，如何在1秒后在Jquery中显示一个元素？

Question

当您将鼠标悬停在聊天列表中的名称上时，我正在尝试在网格视图中创建一个悬停菜单，就像Gmail中的一样。

如果鼠标仍在元素上，1-2秒后如何在Jquery中显示元素？

以下操作不正常，因为如果我只是在整个列表中移动鼠标，所有元素都会显示出来（即使延迟时间为1秒）。

 $('.label, .popup').hover(function(e) {
                setTimeout(function() {
                    $(e.target).closest("tr").find(".popup").show();
                }, 1000);


            }, function(e) {
                setTimeout(function() {
                    $(e.target).closest("tr").find(".popup").hide();
                }, 1000);
            });

<asp:TemplateField>
    <ItemTemplate>

        <asp:Label ID="label1" CssClass="label" runat="server" Text='<%# Eval("Column1") %>'></asp:Label>

            <asp:Panel runat="server" ID="popup" CssClass="popup" 
            Style="display: none; position: absolute; margin-left: 60px; width: 250px;">


                Random text

            </asp:Panel>

    </ItemTemplate>
</asp:TemplateField>

Answer 1

清除mouseout函数中的setTimeout，因此如果未显示1秒，因为未显示鼠标悬停在该元素上。

$('.label, .popup').hover(function(e) {
            $(this).data('timeout', setTimeout(function() {
                $(e.target).closest("tr").find(".popup").show();
            }, 1000));


        }, function(e) {
            clearTimeout($(this).data('timeout'));
            setTimeout(function() {
                $(e.target).closest("tr").find(".popup").hide();
            }, 1000);
        });