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

Question

[GrimmAS]

Пример:
https://codepen.io/Anton12/pen/LbYvEp

Как сделать, чтобы при наведении на блок два срабатывал hover на блоке 1 и наоборот? Или средствами css это невозможно?

На практике нужно, чтобы при наведении на окно слайдера подсвечивалась кнопка в нем.

Answer 1

[Алексей Николаев]

Необходимо, чтобы блок 1 был после блока 2. Тогда можно будет использовать селектор "~". Либо, если блок 1 будет непосредственно после блока 2, можно будет использовать селектор "+".

Других вариантов средствами css нет.

P.S. На практике я бы просто вложил блок 1 в блок 2 и сделал так: .slider-window:hover .btn { background-color: red; }. Никакого геморроя в данном случае не вижу, тем более, что, как правило, кнопка слайдера является дочерней нодой слайда, или, как минимум, обертки для коллекции слайдов. Если у вас это не так - повод исправить. Структура, как правило, выглядит так:

<div class="slider-window">
    <ul class="slide-list">
        /* слайды  */
    </ul>
    <a href="#" class="btn">Кнопка</a>
</div>

Comments

[lemme]

Не обязательно, с оператором "~" - главное, чтоб оба блока были на одном уровне. https://jsfiddle.net/r5xnj5jh/