Вы можете использовать общий 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>