0 
<ul id="nav">
    <li>
        <a href="#" title="Return home">Home</a>

    </li>
    <li>
        <a href="#" title="About the company">About</a>
        <ul>
            <li><a href="#">The product</a>
            <ul> // level 2
            <li><a href="#">x3</a></li>
            <li><a href="#">x4</a></li>
            </ul>
            </li>

            <li><a href="#">Meet the team</a>
<ul> // level 2
            <li><a href="#">x1</a></li>
            <li><a href="#">x2</a></li>
            </ul></li>
        </ul>
</li>
</ul>

使用 jquery 我想选择 2 级的 ul，例如如果我将鼠标悬停在“产品”上，那么我只想选择它旁边的 ul[level 2]，而不是所有 2 级 ul。

我使用jQuery代码来选择这样 

$('#nav li ul li').mouseover(function(){
    $(this).children('ul').css('opacity','.5');
});

但是这个代码对 2 级 ul 的影响我想选择<li>悬停在里面的 ul...

4

2 回答 2

1

尝试使用子组合选择器：

$('#nav > li > ul > li').mouseover(function(){
    $(this).children('ul').css('opacity','.5');
});

这意味着它只会选择作为无序列表的直接子项的列表项。换句话说，它只看标记结构的下一层，没有更深。

于 2013-04-29T15:56:44.947 回答
0

可以用 CSS 做：

jsfiddle demo

#nav > li > ul > li:hover > ul {opacity:.5;}
于 2013-04-29T16:02:37.120 回答