JS / jQuery：別の（下の）LI要素にカーソルを合わせると、ULナビゲーションの最初のLIアイテムを選択できますか？

Question

すべてのリンクをリストするために単純な順序なしリストを使用するナビゲーションを作成しようとしています。基本的なもの。ただし、最初のLI要素のクラス名は＆quot; section-title＆quot;です。この「セクションタイトル」に続くのは、他のページへのリンクです。

今、li.section-titleの背景色を黒に変更したいのですが、そのセクションのリンク（section-titleの下のLI要素）にカーソルを合わせます。

問題は、ナビゲーションに複数のUL LI.section-titleがあるため、直接的な方法（機能する）が使用していたことです：

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

});

ただし、同時にページのすべてのli.section-title要素の色が変更されます。

現在、（this）.parentを使用して、現在ホバーされているli要素を含むグループのli.section-titleのみを取得しようとしていますが、これは何らかの理由でまったく機能しません。 多分それは間違っているか、私のコードの背後にある理論です。

これは私の現在のコードです（動作しません）：

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

});

私はjQueryを初めて使用し、この種のことに関する多くのドキュメントをオンラインで検索しましたが、理解できませんでした。

たぶんできる。 問題のWebサイト（壊れたスクリプトを含む）は次の場所にあります。 www.jannisgundermann.com

ただし、liアイテムの「ナッジ」と色の変更は、これに関係のない別のスクリプトによって行われます。

お読みいただきありがとうございます。 ジャニス

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

});