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 项目的“轻推”和颜色变化是由与此无关的另一个脚本完成的。

感谢阅读。 詹尼斯

Answer 1

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

$('#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" );
}
);

});