2

チャットリストの名前の上にマウスを置くと、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>
4

1 に答える 1

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);
        });
于 2012-09-07T23:30:12.913 に答える