Jquery 将鼠标悬停在第三级li上时，在导航栏中高亮显示第二级li

当鼠标悬停在导航栏的任何子项上时，我希望突出显示导航栏的第二级父项；顶层具有完全不同的样式，因此不适用于我尝试执行的操作，因此当我将鼠标悬停在任何第三层项目上时，我希望设置第二层的样式。我知道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>

---

提前感谢

问题是，您在完整的

li

元素上使用了highlight类。如果只将突出显示的

添加到链接中，则该链接有效

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

这里的工作示例：
如果这只适用于第三级，那么这就足够了：

$('.primary-navigation ul ul ul li').hover(
    function(){
        $(this).parent().parent().addClass('highlighted');
    },
    function(){
        $(this).parent().parent().removeClass('highlighted');  
    }
);

你为什么要在没有类的情况下工作？没有特别的理由，只是为了让我的代码尽可能小！这不是问题所在。问题是第三层也被突出显示，因为它被第二层
li
标记包围。那么这很可能是css样式的问题。你能发布相关的css吗？我猜子li继承了父li的css属性。在中，需要使用li styleing.Np中的显式定义覆盖.hilight类中指定的属性。如果是回答您的问题，只需单击柜台下方的绿色复选框接受答案，以向其他人表明您的问题已被回答。
$('.primary-navigation ul ul ul li').hover(
    function(){
        $(this).parent().parent().addClass('highlighted');
    },
    function(){
        $(this).parent().parent().removeClass('highlighted');  
    }
);