Вы слышали правильно - CSS не позволяет перемещаться вверх по дереву DOM, только вниз. Например, вы можете выбирать детей, но не родителей.
Вот один из способов сделать это с помощью jQuery:
$("li.child").on("hover", function(){
$(this)
.closest("li.parent")
.css({
// styling here
});
});
Мы выбираем элемент li
с классом child
. Мы связываем с ним событие hover
и запускаем функцию, когда это событие происходит. Функция находит ближайшего родителя дочернего элемента li
с классом parent
, и мы меняем его CSS.
Подробнее о on()
здесь , closest()
здесь и css()
здесь .
Также имейте в виду, что для более ранних версий jQuery вы можете использовать bind()
или delegate()
.
РЕДАКТИРОВАТЬ: Чтобы изменить его при наведении мыши и mouseout:
$("li.child").on("mouseover mouseout", function(){
$(this)
.closest("li.parent")
.toggleClass("myClass");
});
И что вы здесь делаете, это определяете класс myClass
в вашем CSS. toggleClass
добавляет класс, если он еще не существует в элементе, и удаляет его в противном случае. Это говорит само за себя. Таким образом, вы экономите несколько байтов и используете более предпочтительный и рекомендуемый jQuery.