将鼠标悬停在 LI 上时做“某事”，但在包含 LI 时不做答案

【问题标题】：do "something" when hovering over a LI, but not when over containing LI's将鼠标悬停在 LI 上时做“某事”，但在包含 LI 时不做
【发布时间】：2011-03-17 10:33:00
【问题描述】：

将鼠标悬停在列表项上时，我将如何做“某事”，但不包含列表项。

示例：

$('#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。这有意义吗？

顺便说一句，这是一个菜单，我希望在我滚动下拉菜单时标签的顶部保持亮起

【问题讨论】：

标签： jquery css

【解决方案1】：

如果我正确理解了这个问题，那么看看使用child selector

$('#mainnav>ul>li').hover( function () {

【讨论】：

【解决方案2】：

在您的选择器中更加具体。尝试将'#mainnav li' 更改为'#mainnav>ul>li' 或'#mainnav>ul>li>a'。

【讨论】：

【解决方案3】：

最简单的方法是确保 CSS 专门选择了您想要突出显示的那些 li：

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

因此，结合使用 JQuery 来设置类名，以及 CSS 选择器在设置类名后只选择与顶级元素匹配的那些 li 元素应该可以解决问题。

【讨论】：