JS / jQuery: Come posso selezionare il primo elemento LI di una navigazione UL quando si passa sopra un altro elemento LI (inferiore)?

Question

Sto cercando di effettuare una navigazione che utilizza semplici elenchi non ordinati per elencare tutti i collegamenti. Roba di base. Tuttavia, il primo elemento LI ha un nome di classe di "titolo-sezione". seguendo questo 'titolo-sezione' ci sono i collegamenti alle altre pagine.

Ora vorrei cambiare il colore di sfondo del titolo della sezione in nero mentre si passa con il mouse su uno dei collegamenti di quella sezione (gli elementi LI sotto il titolo della sezione).

Il problema è che ho più di 1 titolo di sezione UL LI nella mia navigazione, quindi il metodo diretto (che ha funzionato) stava 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" );
}
);

});

ma cambierebbe simultaneamente il colore di TUTTI gli elementi del titolo della sezione della pagina.

Attualmente sto cercando di usare (this) .parent per ottenere solo il titolo li.section del gruppo che include l'elemento li al passaggio del mouse, ma questo non funziona affatto per qualche motivo. Forse è la teoria che sta dietro che è sbagliata o il mio codice.

Questo è il mio codice attuale (che non funziona):

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

});

Sono abbastanza nuovo su jQuery e ho cercato molta documentazione su questo tipo di cose online, ma semplicemente non sono riuscito a capirlo.

Forse puoi. Il sito Web in questione è disponibile (incluso lo script non funzionante) all'indirizzo: www.jannisgundermann.com

Nota però che il 'nudging' e il cambio di colore degli oggetti li sono fatti da un altro script non correlato a questo.

Grazie per aver letto. Jannis

Answer 1

Non stai prendendo di mira correttamente il file desiderato. Prova questo:

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

Devi prima trovare il genitore ul, quindi trovare l'elemento all'interno di quel ul che vuoi evidenziare.

Answer 2

Prova invece. Se specifichi un elemento come secondo parametro, cercherà solo i figli di quell'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" );
}
);

});