Question

我有一个菜单，我希望能够将鼠标悬停在“策略”下的菜单项上，并使用JQuery显示工具提示。我的想法是仅将选择器static.dynamic-children用于策略。从那里为包含策略1，策略2和策略3的li标签设置悬停操作，并显示工具提示（该示例的文本可以是任何内容）。这就是我被困住的地方，不知道如何继续。

这样做的最佳方法是什么？任何帮助将不胜感激。

注意：该菜单由SharePoint动态生成，因此具有所有属性。

以下是菜单的HTML：

<UL class="root static">
<LI class=static><A accessKey=1 class="static menu-item" href="/Pages/Welcome2.aspx">
            <SPAN class=additional-background>
                <SPAN class=menu-item-text>Home</SPAN>
            </SPAN></A>
            <UL class=static>
                <LI class="static dynamic-children" hoverDebouncer="0">
                    <SPAN class="static dynamic-children menu-item">
                        <SPAN class=additional-background>
                            <SPAN class=menu-item-text>Applications</SPAN>
                        </SPAN>
                    </SPAN>
                    <UL class=dynamic>
                        <LI class=dynamic><A class="dynamic menu-item new-window" href="http://localhost/App1/MyApp1.aspx" target=_blank><SPAN class=additional-background><SPAN class=menu-item-text>App 1</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item" href="/Documents/MyApp2.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>App 2</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item new-window" href="http://localhost/App3/MyApp3.aspx" target=_blank><SPAN class=additional-background><SPAN class=menu-item-text>App 3</SPAN></SPAN></A></LI>
                    </UL>
                </LI>
                <LI class="static dynamic-children" hoverDebouncer="0">
                    <SPAN class="static dynamic-children menu-item">
                        <SPAN class=additional-background>
                            <SPAN class=menu-item-text>Policies</SPAN>
                        </SPAN>
                    </SPAN>
                    <UL class=dynamic>
                        <LI class=dynamic><A class="dynamic menu-item" href="/corp/Policy1/Shared%20Documents/Forms/Policies.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Policy 1</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item" href="/corp/Policy2/Shared%20Documents/Forms/Policies.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Policy 2</SPAN></SPAN></A></LI>
                        <LI class=dynamic><A class="dynamic menu-item" href="/services/Policy3/Resources/Forms/Policies.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Policy 3</SPAN></SPAN></A></LI>                            
                    </UL>
                </LI>
                <LI class=static>
                    <A class="static menu-item" title="The Search Center displays search results" href="/SearchCenter/Pages/default.aspx"><SPAN class=additional-background><SPAN class=menu-item-text>Search</SPAN></SPAN></A>
                </LI>
            </UL>
        </LI>
    </UL>

Answer 1

你看过jquery hover not working on my list items吗？

您可以在“政策”菜单部分添加课程hoverable或类似内容。然后设置一个选择器.hoverable li并使用上面的链接触发代码以打开工具提示。

如果您只想要一个简单的工具提示，可以将title='Tooltip here'属性添加到li。例如<li title="blah blah">My Menu Item 3</li>。

您还可以使用jQuery UI获得更好的高级工具提示：http://jqueryui.com/tooltip/

更新：选择器$(".dynamic-children:nth-child(2) li").attr("title", "hi");应该可以解决问题。查看使用您的HTML完成的http://jsfiddle.net/Qfx7c/

使用JQuery在特定的li菜单项上设置悬停

1 个答案: