JS/jQuery：別の（下位の）LIエレメントをホバリングするときに、ULナビゲーションの最初のLIアイテムを選択するにはどうすればよいですか？

Question

単純な順序付けられていないリストを使用してすべてのリンクを一覧表示するナビゲーションを作成しようとしています。基本的なもの。しかし、最初のLI要素のクラス名は "section-title"です。これに続く 'section-title'は、他のページへのリンクです。

これで、そのセクションのリンクの1つ（section-titleの下にあるLI要素）にカーソルを合わせながら、li.section-titleの背景色を黒に変更します。

（働いて）直接法を使用していたので、問題は、私は私のナビゲーションで以上1 UL LI.sectionタイトルを持っているということで

：

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

}); 

をしかし、それは同時にALL李の色を変更しますページの.section-title要素。

現在のところ、私は（現在）.parentを使用して、現在オーバーハウリングされているli要素を含むグループのli.section-titleのみを取得しようとしていますが、何らかの理由でこれがまったく機能しません。 それの裏にある理論は間違っているか、自分のコードです。私はjQueryのにかなり新たなんだとオンラインの事のこのタイプの文書の多くを検索しましたが、単にそれを理解できなかった

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

}); 

：

これが私の現在のコード（動作しない）でありますでる。

おそらく可能です。 問題のウェブサイトはで（壊れたスクリプトを含む）を見つけることができます：「ナッジ」とLi項目の色の変化することを、この1とは関係のない別のスクリプトによって行われているが www.jannisgundermann.com

注意。

読んでいただきありがとうございます。 Jannis

Answer 1

あなたはあなたが欲しいLiを適切にターゲティングしていません。これを試してください：

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

親のulを最初に見つけて、そのulの中で強調表示したい要素を見つけなければなりません。

Answer 2

代わりにこれを試してください。 2番目のパラメータとして要素を指定すると、その要素の子のみが検索されます。

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

});