如何保持 Jquery gridview 悬停菜单可见

Posted 2023-05-09

【中文标题】如何保持 Jquery gridview 悬停菜单可见

【英文标题】：How to keep Jquery gridview hover-menu visible

【发布时间】：2012-09-02 20:19:00

【问题描述】：

我正在网格视图上创建悬停菜单，但由于某些原因，我无法保持弹出窗口可见。当鼠标悬停在标签上时，弹出窗口会出现，但是当我在弹出窗口上移动它时，它不会保持可见。

            $('.label').mouseover(function(e) 
                $(e.target).closest("tr").find(".popup").show();
            );

            $('.label').mouseout(function(e) 
                $(e.target).closest("tr").find(".popup").hide();
            );

            $('.popup').mouseover(function(e) 
                $(e.target).show();
            );

            $('.popup').mouseout(function(e) 
                $(e.target).hide();
            );


<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>

也许弹出窗口被隐藏了，因为即使鼠标在它上面，它也在标签之外？任何想法如何解决这个问题？

【参考方案1】：

  $(document).ready(function () 
        $('.label').mouseover(function (e) 
            $(this).find(".popup").show();
        );

        $('.label').mouseout(function (e) 
            $(this).find(".popup").hide();
        );
  );

【讨论】：

运行项目，在浏览器中右键点击查看页面源代码。你可以为一个项目模板粘贴那个 html 代码吗？

谢谢，我不得不在 $('.popup').mouseover(function()) 中将 $(e.target) 替换为 $(this)，现在它可以正常工作了 :)跨度>