JS/jQuery: How can I select the first LI item of an UL navigation when hovering over another (lower) LI element?

Question

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.

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).

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

$(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.

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 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.

Maybe you can. The website in question can be found (including the broken script) at: 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.

Thanks for reading. Jannis

Answer 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.

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

});