Как задействовать два блока при наведении на ссылку?

Question

[Азат Тагаев]

Всем привет! Подскажите пожалуйста, мне нужно при наведении на тег a задействовать сразу два элемента, пример:

Ссылка - 1
<div>
<a href="путь" class="link-1-up"></a>
<a href="путь" class="link-2-up"></a>
</div>

Ссылка - 2
<div>
<a href="путь" class="link-1-bottom"></a>
<a href="путь" class="link-2-bottom"></a>
</div>

Фон
<div class="background-1"></div>
<div class="background-2"></div>

.background-1 {
     opasity: 0
}
.background-2 {
     opasity: 0
}

Значит при наведении курсора на любую ссылку - 1, ссылка - 2 (оба) меняли цвет, а фону приписывалось opacity: 1.
Искал решение в Гугле по нечего не нашел. Буду безмерно благодарен за код JQ или JS.
Заранее огромное спасибо!

Answer 1

[nvdfxx]

$('a').hover(
    function() {
        $(this).addClass('hover').siblings('a').addClass('hover')
        $('.background-1').animate({'opacity' : 1}, 300)
    },
    function() {
        $(this).removeClass('hover').siblings('a').removeClass('hover')
        $('.background-1').animate({'opacity' : 0}, 300)
    }
);

Comments

[Виталий Киренков]

$(this).siblings('a').andSelf().addClass('hover') - так один раз указывается класс
Фон так же, через класс лучше

Answer 2

[Виталий Киренков]

Вы криво пытаетесь решить задачу. Всё гораздо проще. На jq (или чистый js) вы вешаете событие Наведение (ховер), на обёртку ссылок. В этот момент, на него вешаете класс актив, а на всех соседних - дизаблед, и по этим классам уже стилизуете содержимое.

Comments

[Азат Тагаев]

Виталий, извиняюсь если трачу ваше время, но JQ и JS я не силен, можно по подробнее, с примером!

[Виталий Киренков]

Азат Тагаев, Соседний комментарий, там написали с кодом. Я бы решил несколько иначе, как я описал, но тот вариант наверно тоже будет работать

Answer 3

[Михаил]

Отлавливаете события 'hover' для каждой ссылки и по ним делаете обработчик для нужных элементов