JS/jQuery: Wie kann ich den ersten LI-Eintrag einer UL-Navigation auswählen, wenn ich den Mauszeiger über ein anderes (niedrigeres) LI-Element halte?

Question

Ich versuche eine Navigation zu erstellen, die einfache ungeordnete Listen verwendet, um alle Links aufzulisten. Grundlegende Sachen. Das erste LI-Element hat jedoch den Klassennamen "section-title". Nach diesem Abschnitt-Titel folgen die Links zu den anderen Seiten.

Jetzt möchte ich die Hintergrundfarbe des li.section-title in schwarz ändern, während ich den Mauszeiger über einen der Links dieses Abschnitts halte (die LI-Elemente unterhalb des Abschnittstitels).

Das Problem ist, dass ich mehr als 1 UL LI.section-Titel in meiner Navigation haben so die direkte Methode wurde (die gearbeitet) mit:

$(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 die Farbe aller li gleichzeitig ändern .section-title Elemente der Seite.

Momentan versuche ich (this) .parent zu verwenden, um nur den li.section-title der Gruppe zu erhalten, die das aktuell über li Element gehaltene Element enthält, aber das funktioniert aus irgendeinem Grund überhaupt nicht. Vielleicht ist es die Theorie dahinter, die falsch ist oder mein Code.

Dies ist mein aktueller Code (was 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 jQuery ziemlich neu bin und habe eine Menge Dokumentation dieser Art der Sache Online gesucht, aber konnte einfach nicht es heraus aus.

Vielleicht können Sie. Die betreffende Website kann (einschließlich der gebrochenen Schrift) unter: obwohl der li Artikel, dass die ‚Anstoßen‘ und Farbwechsel von einem anderen Skript nicht einen Bezug zu diesem erfolgt www.jannisgundermann.com

Hinweis .

Danke fürs Lesen. Jannis

Answer 1

Sie zielen nicht richtig auf die Li, die Sie wollen. Versuchen Sie das:

$('#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 die Eltern-ul zuerst finden, und dann finden Sie das Element innerhalb dieser ul, die Sie markieren möchten.

Answer 2

Versuchen Sie es stattdessen. Wenn Sie ein Element als zweiten Parameter angeben, sucht es nur nach untergeordneten Elementen dieses Elements.

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

});