JS / jQuery: ¿Cómo puedo seleccionar el primer elemento LI de una navegación de UL al pasar el cursor sobre otro elemento LI (inferior)?

Question

Estoy tratando de hacer una navegación que usa listas desordenadas simples para enumerar todos los enlaces. Cosas básicas. Sin embargo, el primer elemento LI tiene un nombre de clase de " sección-título " A continuación de esta 'sección-título' están los enlaces a las otras páginas.

Ahora me gustaría cambiar el color de fondo de li.section-title a negro mientras se desplaza sobre uno de los enlaces de esa sección (los elementos LI debajo de la sección-título).

El problema es que tengo más de 1 título de sección UL LI en mi navegación, por lo que el método directo (que funcionó) estaba 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" );
}
);

});

pero cambiaría simultáneamente el color de TODOS los elementos del título de la página de la página.

Actualmente estoy tratando de usar (this) .parent para obtener solo el título li.section del grupo que incluye el elemento que actualmente se encuentra sobre el li, pero esto no funciona en absoluto por alguna razón. Tal vez sea la teoría subyacente lo que está mal o mi código.

Este es mi código actual (que no 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" );
}
);

});

Soy bastante nuevo en jQuery y he buscado un montón de documentación de este tipo de cosas en línea, pero simplemente no pude resolverlo.

Tal vez puedas. El sitio web en cuestión se puede encontrar (incluido el script roto) en: www.jannisgundermann.com

Sin embargo, tenga en cuenta que el cambio de color y el cambio de color de los elementos li se realiza mediante otra secuencia de comandos no relacionada con esta.

Gracias por leer. Jannis

Answer 1

No estás apuntando correctamente al li que deseas. Prueba esto:

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

Primero debe encontrar la ul principal y luego buscar el elemento dentro de esa ul que desea resaltar.

Answer 2

Prueba esto en su lugar. Si especifica un elemento como segundo parámetro, solo buscará elementos secundarios de ese 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" );
}
);

});