JS/JQuery: Wie kann ich das erste Li -Element einer UL -Navigation auswählen, wenn ich über ein anderes (niedrigeres) Li -Element schwebe?

Question

Ich versuche eine Navigation zu erstellen, die einfache, ungeordnete Listen verwendet, um alle Links aufzulisten. Grundlegendes Zeug. Das erste LI-Element hat jedoch einen Klassennamen "Abschnittstitel". Im Folgenden folgen die Links zu den anderen Seiten.

Jetzt möchte ich die Hintergrundfarbe des Li.Sektionstitels in Schwarz ändern und über einen der Links dieses Abschnitts (die Li-Elemente unter dem Abschnitt) schweben.

Das Problem ist, dass ich mehr als 1 UL Li.Sektionstitel in meiner Navigation habe, sodass die direkte Methode (die funktioniert hat) verwendet wurde:

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

});

Aber es würde gleichzeitig die Farbe aller Li.Sektionstitel-Elemente der Seite verändern.

Derzeit versuche ich zu verwenden (dies). Parent, um nur den Li-Abschnitt der Gruppe zu erhalten, die das derzeit schwebende LI-Element enthält, dies jedoch aus irgendeinem Grund überhaupt nicht funktioniert. Vielleicht ist es die Theorie dahinter, die falsch ist, oder mein Code.

Dies ist mein aktueller Code (der nicht funktioniert):

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

});

Ich bin ziemlich neu in JQuery und habe eine Menge Dokumentation dieser Art von Dingen online durchsucht, konnte es aber einfach nicht herausfinden.

Vielleicht können Sie. Die fragliche Website finden Sie (einschließlich des kaputten Skripts) unter: www.jannisgundermann.com

Beachten Sie jedoch, dass der „Stups“ und die Farbänderung der Li -Elemente von einem anderen Skript durchgeführt werden, das nicht mit diesem zu tun hat.

Danke fürs Lesen. Jannis

Answer 1

Sie zielen nicht richtig auf das LI, das Sie wollen. Versuche dies:

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

Sie müssen zuerst die übergeordneten UL -UL finden und dann das Element in diesem UL finden, das Sie hervorheben möchten.

Answer 2

Versuchen Sie es stattdessen. Wenn Sie ein Element als zweiter Parameter angeben, wird nur Kinder dieses Elements gesucht.

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

});