Jquery “做”；“什么？”；在LI上悬停时，但在包含LI时不悬停'；s

当我将鼠标悬停在一个列表项上而不是包含列表项时，我该如何做“某事”

例如：

$('#mainnav li').hover( function () {
    $(this).find('ul').stop(true,true).slideDown(100);
    $(this).find('a:first').css({
        "background-image": 'url(/assets/images/nav_bg2.png)',
        "color": '#fff',
        "text-shadow" : '1px 1px 1px #000'
    });

}, function () {
    $(this).find('ul').stop(true,true).slideUp(100);
    $(this).find('a:first').css({
        "background-image": 'none',
        "color": '#630872',
        "text-shadow" : '1px 1px 1px #fff'
    });
});

示例html

<div id="mainnav">
<ul>
    <li  class="active nav-home">

        <a href="/">Home</a>
        <ul>
            <li><a href="/home/welcome">Welcome</a></li>
            <li><a href="/home/latest-conveyance">Latest Conveyance</a></li>
        </ul>
    </li>

    <li  class="nav-who-we-are">

        <a href="/who-we-are">Who We Are</a>
        <ul>
            <li><a href="/who-we-are/history">History</a></li>
            <li><a href="/who-we-are/culture">Culture</a></li>
            <li><a href="who-we-are/people">People</a></li>
            <li><a href="who-we-are/vision">Vision</a></li>

        </ul>
    </li>


    <li  class="nav-what-we-do">
        <a href="/what-we-do">What We Do</a>
        <ul>
            <li><a href="/what-we-do/services">Services</a></li>
            <li><a href="/what-we-do/projects">Projects</a></li>

            <li><a href="/what-we-do/portfolio">Portfolio</a></li>
            <li><a href="/what-we-do/philanthropy">Philanthropy</a></li>
        </ul>

    </li>

</ul>
</div>

这里的问题是，我想将一些css应用于顶级列表项，而不是嵌套在下面的列表项。当前，只要我将鼠标悬停在顶级列表项中的列表项上，代码就会应用css。这有意义吗

---

顺便说一句，这是一个菜单，我希望顶部的标签保持亮起，而我滚动通过下拉列表

在您的选择器更具体。试着将

'#mainnav li'

改为

'#mainnav>ul>li'

或

'#mainnav>ul>li>a'

如果我正确理解了这个问题，请考虑使用

---

最简单的方法是确保CSS特别选择您想要突出显示的li：

#mainnav > ul > li.classname {
   /* css code here */
}

因此，组合使用JQuery来设置类名，CSS选择器在设置类名后只选择那些与顶级元素匹配的li元素应该可以实现这一点

#mainnav > ul > li.classname {
   /* css code here */
}