JS / jQuery: как выбрать первый элемент LI навигации UL при наведении курсора на другой (нижний) элемент LI?
-
03-07-2019 - |
Вопрос
Я пытаюсь создать навигацию, которая использует простые неупорядоченные списки для перечисления всех ссылок. Основные вещи. Однако первый элемент 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-заголовок группы, которая включает в себя элемент 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
Решение
Вы неправильно нацелились на нужную ли. Попробуйте это:
$('#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, а затем найти в этом элементе элемент, который вы хотите выделить.
Другие советы
Попробуйте вместо этого. Если вы укажете элемент в качестве второго параметра, он будет искать только дочерние элементы этого элемента.
$(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" );
}
);
});