Question

当将鼠标悬停在列表项上时，我将如何处理“某事”，而不是包含列表项。

示例：

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

不过，这是一个菜单，我希望顶部标签在我滚动下拉列表时保持亮起

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

当鼠标悬停在LI上时做“某事”，但是当过度包含LI时则不行

3 个答案: