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

I am trying to make a navigation that uses simple unordered lists to list all the links. Basic stuff. However the first LI element has a class name of "section-title". following this 'section-title' are the links to the other pages.

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

Now i would like to change the background color of the li.section-title to black while hovering over one of the links of that section (the LI elements beneath the section-title).

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

The issue being that I have more than 1 UL LI.section-title in my navigation so the direct method (which worked) was using:

问题是我的导航中有超过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" );
}
);

});

but it would simultaneously change the color of ALL li.section-title elements of the page.

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

Currently i'm trying to use (this).parent to get only the li.section-title of the group that includes the currently hovered over li element but this does not work at all for some reason. Maybe it's the theory behind it that's wrong or my code.

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

This is my current code (which does not work):

这是我当前的代码(不起作用):

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

});

I'm pretty new to jQuery and have searched a lot of documentation of this type of thing online but simply couldn't figure it out.

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

Maybe you can. The website in question can be found (including the broken script) at: www.jannisgundermann.com

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

Note though that the 'nudging' and colour change of the li items is done by another script not related to this one.

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

Thanks for reading. Jannis

谢谢阅读。 Jannis

2 个解决方案

#1

You're not properly targeting the li you want. Try this:

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

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

You have to find the parent ul first, and then find the element within that ul that you want to highlight.

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

#2

Try this instead. If you specify an element as the second parameter, then it will only look for children of that element.

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

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

});

#1