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

Question

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

Maintenant je voudrais changer la couleur de fond du li.section-title en noir en passant la souris sur l'un des liens de cette section (les éléments LI sous le titre de la section).

La question étant que j'ai plus de 1 UL LI.section-titre dans ma navigation si la méthode directe (qui a travaillé) 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 il en même temps changer la couleur de tous li Éléments .section-title de la page.

Actuellement j'essaie d'utiliser (ce) .parent pour obtenir seulement le li.section-title du groupe qui inclut l'élément over over actuellement planifié mais cela ne fonctionne pas du tout pour une raison quelconque. Peut-être que c'est la théorie derrière tout ça qui est faux 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 pour jQuery et ont cherché beaucoup de documents de ce genre de chose en ligne, mais ne pouvais pas comprendre en dehors.

Peut-être que vous le pouvez. Le site en question se trouve (y compris le script fendus): www.jannisgundermann.com

Notez cependant que le « nudge » et le changement de couleur des éléments li est fait par un autre script non lié à celui-ci .

Merci d'avoir lu. Jannis

Answer 1

Vous ne ciblez pas correctement le li que vous voulez. 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 trouver le parent ul d'abord, puis trouver l'élément dans ce ul que vous voulez mettre en évidence.

Answer 2

Essayez ceci à la place. Si vous spécifiez un élément en tant que deuxième paramètre, il ne recherchera que 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"); 
} 
); 

});