Как изменить цвет родительского div'a при наведении на дочерний?

Имеется меню с вложенными элементами. При наведении на выбранный пункт "оно" выпадает и становиться #F5F5F5 цветом, но когда курсор уводится на выпавшие разделы, то выбранный пункт должен иметь цвет #F5F5F5.
Вот HTML код.
<ul id="nav"> 
	<li>
            <a class="MenuBlock_1" href="#">Родитель</a>
		<ul class="MenuBlock_1_panel">
			<li><a href="#">Первый пункт</a></li>
			<li><a href="#">Второй</a></li>
			<li><a href="#">Третий</a></li>
		</ul>
		</div>
	</li>

Я хотел сделать так:
#nav ul.MenuBlock_1_panel:hover + li .MenuBlock_1{
	background:#F5F5F5;
}

Но потом узнал, что изменять стиль родительского элемента в CSS нельзя. Искал как сделать на JavaScript, нашел пару вариантов, но появились проблема, как указать с тегами "li ul".
  • Вопрос задан
  • 3734 просмотра
Пригласить эксперта
Ответы на вопрос 3
batareika
@batareika
У вас меню выпадает при наведении на #nav li, верно?
При #nav li:hover этот пункт меняет цвет и выпадает меню, которое находится в этом li?
Задача должна решаться простым
#nav li:hover > a { background: #f5f5f5; }
Ответ написан
Deonisius
@Deonisius
Родился в 11110110111 году, 11000 января.
появились проблема, как указать с тегами "li ul"
Этот момент я что-то не совсем понял; уточняйте. Но может такой вариант подойдёт без уточнений:
[].forEach.call(document.querySelectorAll('.MenuBlock_1_panel'), function (el) {
    el.addEventListener('mouseenter', function () {
        this.previousElementSibling.style.backgroundColor = '#F5F5F5';
    }, false);
    el.addEventListener('mouseleave', function () {
        this.previousElementSibling.style.backgroundColor = '';
    }, false);
});
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
А что мешает переключать класс у родителя при наведении?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Гринатом Москва
от 180 000 до 220 000 ₽
JuicyScore Москва
от 120 000 до 180 000 ₽