jquery - 悬停在第三级 li 上时，在导航栏中突出显示第二级 li

Question

我希望在将鼠标悬停在导航栏的任何子级上时突出显示导航栏的二级父级；顶层具有完全不同的样式，因此不适用于我正在尝试做的事情，因此当我将鼠标悬停在任何第三层元素上时，我想为第二层设置样式。我知道 javascript/jquery 是实现此目的的方法，因此由于我的技能达不到标准，所以我碰壁了。

这是我的标准 html 导航结构:

<nav class="primary-navigation">
     <ul>
         <li><a href="#">TOP LEVEL</a>
             <ul>
                 <li><a href="#">SECOND LEVEL</a>
                     <ul>
                         <li><a href="#">THIRD LEVEL</a></li>
                         <li><a href="#">THIRD LEVEL</a></li>
                         <li><a href="#">THIRD LEVEL</a></li>                    
                     </ul>
                 </li>
             </ul>
         </li>
     </ul>
</nav>

我一直在尝试在没有类(class)的情况下工作，但是在没有类(class)的情况下我一直无法选择 li 元素，理想情况下，如果可能的话，我想学习如何在没有类(class)的情况下进行操作。

这是我到目前为止的进展，但它似乎也为所有子项添加了“突出显示”类，但我只想将其应用于父项!

$('THIRD LEVEL').mouseenter(function() {
      $(this).parent().closest('SECOND LEVEL').addClass('highlighted');
  }).mouseleave(function() {
      $(this).parent().closest('SECOND LEVEL').removeClass('highlighted');
  });

提前致谢

Answer 1

问题是，您在完整的 li 元素上使用了高亮类。如果您仅将 highlighted 添加到它有效的链接。

$('.third').mouseenter(function() {
    $(this).parent().find('a.second').addClass('highlighted');
}).mouseleave(function() {
    $(this).parent().find('a.second').removeClass('highlighted');
});

这里的工作示例:http://jsfiddle.net/VqcKu/7/