Как заменить CSS у 2 div при наведении на любую ссылку?

Question

[Данил]

Имеется две версии логотипа: серый (неактивный) и красный (активный). (div id="logo")
На сайте стоит фоновое изображение (div id="bg").

Нужно сделать так, чтобы при наведении на любую ссылку размещенную через тег a логотип сменялся на красный и поверх фонового изображения появлялась картинка красного цвета. К слову, эта картинка сейчас вставлена через тег div class="overlay", а в CSS выставлено display: none т.к. я не знаю, как сделать так, чтобы она активировалась только при наведении.

Я пытался реализовать это через a:hover + .overlay + #logo, пытался через a:hover + .overlay. Но это работает только тогда, когда картинка и ссылка находятся в одном div и в определенном порядке, а мне надо, чтобы это все работало независимо от div.
Не важно, на чем это будет написано (CSS, JS) - главное, чтобы работало.

Результат должен быть таким:

До:

После наведения на любую ссылку:

Answer 1

[Артем Чернявский]

Ну вот как-то так :)

$(function () {
	$('a').hover(function () {
		$('.overlay').fadeToggle(200);
		$('#logo').toggleClass('is-active');
	});
});

Comments

[Данил]

Спасибо. Код работает частично. Фоновое изображение перекрывается оверлеем, а вот логотип почему-то не меняется. Как это исправить?

[Артем Чернявский]

Ну к логотипу добавляется класс is-active при наведении на ссылки, а там видоизменяйте его с помощью этого класса

[Данил]

Артем Чернявский, спасибо, разобрался.

[Артем Чернявский]

Рад помочь)