Как поменять цвет одновременно при наведении на любую ссылку из нескольких?

Question

Ссылки должны менять цвет одновременно при наведении на любую из них.

Есть ли вариант без JS?

div{width:300px; height:300px;}
a.first:hover,a.second:hover{color:black;}

<div>
<a href="#" class="first">first link</a>
<a href="#" class="second">second</a>
</div

Answer 1

Вы можете использовать общий div при наведении на который будет меняться цвет у элементов.
Либо использовать текущий, либо дополнительно обернуть

<style>
    body{
        background: black;
    }
    div {
        background: white;
        width:300px;
        height:50px;
    }
    div:hover a{
        color:black;
    }
</style>
<body>
<div>
    <a href="#" class="first">first link</a>
    <a href="#" class="second">second</a>
</div
</body>

Для замены стиля при наведении на первый элемент - можно использовать +, если идут подряд, или ~, если находятся в одном элементе.
Но в этом случае не работает замена цвета первого элемента при наведении на второй.

    div{
        width:300px;
        height:300px;
    }
    a.first:hover,a.second:hover {
        color:black;
    }
    a.first:hover ~ a.second{
        color:black;
    }

<div>
    <a href="#" class="first">first link</a>
    <a href="#" class="second">second</a>
</div

В этом случае лучше использовать js или переставлять элементы.

    window.onload = function () {
        var elems1 = document.getElementsByClassName('first');
        var elems2 = document.getElementsByClassName('second');
        elems2[0].onmouseover = function () {
            elems1[0].style.color = 'black';
        };
        elems2[0].onmouseout = function () {
            elems1[0].style.color = '';
        }
    }

    div{
        width:300px;
        height:300px;
    }
    a.first:hover,a.second:hover {
        color:black;
    }
    a.first:hover ~ a.second{
        color:black;
    }

<div>
    <a href="#" class="first">first link</a>
    <a href="#" class="second">second</a>
</div>

БЛОГ НА HUSL

Как поменять цвет одновременно при наведении на любую ссылку из нескольких?

Ответы (1 шт):