Настройка наведения на определенные элементы меню li с помощью JQuery

Question

У меня есть меню, и я хотел бы иметь возможность навести курсор на пункты меню в разделе «Политики» и получить подсказку с помощью JQuery. Я думал, будет использовать селектор static.dynamic-children только для политик. Оттуда установите действие наведения для тегов li, которые содержат политики 1, политику 2 и политику 3, и появится подсказка инструмента (текст может быть любым для этого примера). Здесь я застрял и не знаю, как действовать.

Что было бы лучшим подходом для этого? Любая помощь приветствуется.

ПРИМЕЧАНИЕ. Меню динамически генерируется 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/

Update: селектор $(".dynamic-children:nth-child(2) li").attr("title", "hi"); должен сделать трюк. Проверьте http://jsfiddle.net/Qfx7c/, сделанный с помощью вашего HTML.