JS/JQuery : 다른 (하단) Li 요소 위로 호버링 할 때 UL 탐색의 첫 번째 LI 항목을 어떻게 선택할 수 있습니까?

Question

간단한 변형되지 않은 목록을 사용하여 모든 링크를 나열하는 탐색을 만들려고합니다. 기본적인 것들. 그러나 첫 번째 LI 요소에는 클래스 이름이 "섹션 타이틀"입니다. 이 '섹션 타이틀'을 따르면 다른 페이지에 대한 링크가 있습니다.

이제 Li.section 타이틀의 배경색을 해당 섹션의 링크 중 하나 (섹션 타이틀 아래의 Li 요소) 위에 호버링하면서 검은 색으로 변경하고 싶습니다.

문제는 내비게이션에 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" );
}
);

});

그러나 그것은 동시에 페이지의 모든 Li.section 타이틀 요소의 색상을 변경합니다.

현재 나는 (this)를 사용하려고 노력하고 있습니다. 어쩌면 그것은 그 뒤에있는 이론 일 수도 있고 내 코드 일 수도 있습니다.

이것은 내 현재 코드입니다 (작동하지 않음).

$(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를 처음 접했고 온라인에서 이러한 유형의 사물에 대한 많은 문서를 검색했지만 단순히 알아낼 수 없었습니다.

아마도 당신은 할 수 있습니다. 문제의 웹 사이트는 www.jannisgundermann.com에서 (깨진 스크립트 포함) 찾을 수 있습니다.

LI 항목의 '누드'와 색상 변화는이 스크립트와 관련이없는 다른 스크립트에 의해 수행됩니다.

읽어 주셔서 감사합니다. 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

대신 이것을 시도하십시오. 요소를 두 번째 매개 변수로 지정하면 해당 요소의 어린이 만 찾습니다.

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

});