JS / jQuery：当将鼠标悬停在另一个（较低的）LI元素上时，如何选择UL导航的第一个LI项？

Question

我正在尝试使用简单的无序列表来列出所有链接。基本的东西。但是，第一个LI元素的类名称为“section-title”。在此“section-title”之后是指向其他页面的链接。

现在我想将li.section-title的背景颜色改为黑色，同时将鼠标悬停在该部分的一个链接上（部分标题下面的LI元素）。

问题是我的导航中有超过1个UL LI.section-title所以直接方法（有效）正在使用：

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
    $('#navigation ul li.section-title').animate( {
        backgroundColor: "#000",
        color: "#F9B60F"
    }, "fast" );
},
function() {
    $('#navigation ul li.section-title').animate( {
        backgroundColor: "#FFF",
        color: "#000000",
    }, "fast" );
}
);

});

但它会同时更改页面的所有li.section-title元素的颜色。

目前我正在尝试使用（this）.parent来获取包含当前悬停的li元素的组的li.section-title，但由于某种原因这根本不起作用。 也许这背后的理论是错误的或我的代码。

这是我目前的代码（不起作用）：

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
    $(this).parents(".section-title").animate( {
        backgroundColor: "#000",
        color: "#F9B60F"
    }, "fast" );
},
function() {
    $(this).parents(".section-title").animate( {
        backgroundColor: "#FFF",
        color: "#000000",
    }, "fast" );
}
);

});

我对jQuery很新，并且已经在网上搜索了很多关于此类事情的文档，但根本无法理解。

也许你可以。 可以找到有问题的网站（包括破损的脚本）： www.jannisgundermann.com

请注意，li项目的“轻推”和颜色变化是由另一个与此项无关的脚本完成的。

感谢阅读。 Jannis

Answer 1

你没有正确定位你想要的李。试试这个：

$('#navigation ul li a').hover(
    function() {
        $(this).parents('ul').find('li.section-title').animate( {
            backgroundColor: "#000",
            color: "#F9B60F"
        }, "fast" );
    },
    function() {
        $(this).parents('ul').find('li.section-title').animate( {
            backgroundColor: "#FFF",
            color: "#000000",
        }, "fast" );
    }
);

您必须首先找到父ul，然后在该ul中找到要突出显示的元素。

Answer 2

试试这个。如果指定一个元素作为第二个参数，那么它只会查找该元素的子元素。

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
        $('li.section-title', $(this).parent()).animate( {
                backgroundColor: "#000",
                color: "#F9B60F"
        }, "fast" );
},
function() {
        $('li.section-title', $(this).parent()).animate( {
                backgroundColor: "#FFF",
                color: "#000000",
        }, "fast" );
}
);

});