Question

我正在尝试将悬停效果应用于UL，但是作为一个列表项的子项的UL也会获得效果，这是我不想要的。我尝试了各种各样的事情，例如使用＆gt; sign和.not（）选择器，但没有成功。

这是我的（简化）HTML：

        <ul id="menu">
            <li class="menubox"><a href="#">Home</a></li>
            <li class="menubox"><a href="#">Over Ons</a></li>
            <li class="menubox"><a href="#" id="varianten">Producten</a>
                <ul id="menu_varianten">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li class="menubox"><a href="#">Forum</a></li>
        </ul>

CSS的一些片段可能是相关的：

#menu {
position: relative;
width: 250px;
}

ul#menu{
list-style: none;
margin-left: 0;
padding-left: 0;
}

ul#menu li a{
display: block;
text-decoration: none;
height: 40px;
}

#menu_varianten{
list-style: none;
display: none;
margin-left: 0;
padding-left: 0;
}

ul#menu_varianten li a{
padding-left: 4em;
height:30px;
}

这是jQuery：

$("ul#menu > li").hover(
    function() {
        $(this).stop(true, true).animate({fontSize:"1.4em"}, 150);
    },
    function() {
        $(this).stop(true, true).animate({fontSize:"1.0em"}, 150);
    });

我也尝试了选择器（“ul＃menu＆gt; li”）。not（“＃menu_varianten”），但不幸的是它不起作用。有想法的人吗？

Answer 1

您可以尝试仅扩展第一个锚点。

保持您的HTML和CSS不变，并将javascript更改为：

$("ul#menu li").hover(

function() {
    $(this).find('a').first().stop(true, true).animate({
        fontSize: "1.4em"
    }, 150);
}, function() {
    $(this).find('a').first().stop(true, true).animate({
        fontSize: "1.0em"
    }, 150);
});

http://jsfiddle.net/RCtFU/1/

Answer 2

您可能希望将每个子菜单设为每个父级的兄弟。 CSS继承，所以这将是一个非常简单的避免问题。

示例： http://jsfiddle.net/RCtFU/

<li class="menubox">
    <a href="#" id="varianten">Producten</a>
</li>
<li class="menubox">  <!-- probably want to change the class -->
    <ul id="menu_varianten">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</li>

您需要进行一些进一步的调整（不同的类等），以区分菜单和子菜单。

Answer 3

您可以使用css3 :not()选择器：

$("ul#menu > li :not(ul)").hover(
function() {
    $(this).stop(true, true).animate({
        fontSize: "1.4em"
    }, 150);
}, function() {
    $(this).stop(true, true).animate({
        fontSize: "1.0em"
    }, 150);
});

请参阅jsFiddle。

在jQuery中突出显示列表项而不突出显示它的子项（另一个UL）

3 个答案: