JS / jQuery: Comment puis-je sélectionner le premier élément LI d'une navigation UL lors du survol d'un autre élément LI (inférieur)?

Question

J'essaie de faire une navigation qui utilise de simples listes non ordonnées pour lister tous les liens. Trucs de base. Cependant, le premier élément LI a un nom de classe "section-title". Les liens vers les autres pages suivent ce 'titre de section'.

J'aimerais maintenant changer la couleur d'arrière-plan de la li.section-title en noir en survolant l'un des liens de cette section (les éléments LI situés sous la section titre).

Le problème étant que j'ai plus d'un UL UL-titre-titre dans ma navigation, la méthode directe (qui a fonctionné) utilisait:

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

});

mais cela changerait simultanément la couleur de TOUS les éléments li.section-title de la page.

Actuellement, j'essaie d'utiliser (this) .parent pour obtenir uniquement le titre de li.section du groupe qui inclut l'élément survolé actuellement au-dessus de li, mais cela ne fonctionne pas du tout pour une raison quelconque. Peut-être que c'est la théorie derrière cela qui ne va pas ou mon code.

Ceci est mon code actuel (qui ne fonctionne pas):

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

});

Je suis assez nouveau sur jQuery et j'ai cherché beaucoup de documentation sur ce type de choses en ligne, mais je ne pouvais tout simplement pas comprendre.

Peut-être que vous pouvez. Le site Web en question peut être trouvé (y compris le script interrompu) à l'adresse suivante: www.jannisgundermann.com

Notez cependant que le "décalage" et le changement de couleur des éléments li sont effectués par un autre script non lié à celui-ci.

Merci d'avoir lu. Jannis

Answer 1

Vous ne ciblez pas correctement le li que vous souhaitez. Essayez ceci:

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

Vous devez d'abord trouver le parent ul, puis trouver l'élément dans celui-ci que vous souhaitez mettre en évidence.

Answer 2

Essayez ceci à la place. Si vous spécifiez un élément en tant que second paramètre, il recherchera uniquement les enfants de cet élément.

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

});