JS/JQuery: Como posso selecionar o primeiro item LI de uma navegação por UL ao pairar sobre outro elemento (inferior) Li?

Question

Estou tentando fazer uma navegação que use listas simples não ordenadas para listar todos os links. Coisas básicas. No entanto, o primeiro elemento LI tem um nome de classe de "seção-título". Após isso 'seção-título' estão os links para as outras páginas.

Agora eu gostaria de alterar a cor de fundo do título de li.Section para preto enquanto pairava sobre um dos links dessa seção (os elementos Li abaixo do título da seção).

A questão é que eu tenho mais de 1 ul li.section-title em minha navegação para que o método direto (que funcionou) estava usando:

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

});

Mas isso mudaria simultaneamente a cor de todos os elementos de título de li.Section da página.

Atualmente, estou tentando usar (isso) .Parent para obter apenas o título de li.Section do grupo que inclui o elemento atualmente pairado sobre Li, mas isso não funciona por algum motivo. Talvez seja a teoria por trás disso que está errada ou do meu código.

Este é o meu código atual (que não funciona):

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

});

Sou muito novo no JQuery e pesquisei muita documentação desse tipo de coisa online, mas simplesmente não consegui descobrir.

Talvez você possa. O site em questão pode ser encontrado (incluindo o script quebrado) em: www.jannisgundermann.com

Observe que a alteração de 'nudging' e cor dos itens de LI é feita por outro script não relacionado a este.

Obrigado pela leitura. Jannis

Answer 1

Você não está segmentando corretamente o LI que deseja. Experimente isso:

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

Você precisa encontrar o pai primeiro, e depois encontrar o elemento nesse UL que deseja destacar.

Answer 2

Tente isso em vez disso. Se você especificar um elemento como o segundo parâmetro, ele só procurará filhos desse elemento.

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

});