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

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"); 应该可以解决问题。查看http://jsfiddle.net/Qfx7c/ 使用您的 HTML 完成