JS / jQuery: как выбрать первый элемент LI навигации UL при наведении курсора на другой (нижний) элемент LI?

Question

Я пытаюсь создать навигацию, которая использует простые неупорядоченные списки для перечисления всех ссылок. Основные вещи. Однако первый элемент LI имеет имя класса «section-title». после этого 'section-title' находятся ссылки на другие страницы.

Теперь я хотел бы изменить цвет фона для li.section-title на черный при наведении курсора на одну из ссылок этого раздела (элементы LI под заголовком раздела).

Проблема в том, что у меня в навигации более 1 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.section-title группы, которая включает в себя элемент hover over li, но по какой-то причине это вообще не работает. Может быть, это неправильная теория или мой код.

Это мой текущий код (который не работает):

$(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

Вы неправильно нацеливаете на ли, которого хотите. Попробуйте это:

$('#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, а затем найти в этом элементе элемент, который вы хотите выделить.

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

});