Как при наведение изменить свойства элемента?

Question

[Богдан Нагорный]

Привет, у меня возник довольно странный вопрос.
Допустим у меня есть 2 div

<div class='test'></div>

<div class='test2' style='background-color: black;'><div>

и теперь сам вопрос как сделать так чтоб когда мы наводим на класс test менялся цвет класса test2

Comments

[longclaps]

зачем её менять?

[Hanneman]

1. Изменить класс
2. Через другой класс
3. Класс вместо div

Непонимание всего как устроено лучше устранять обучением.
Не поймите неправильно, но лучше не запрыгивать вперёд, задавая вопросы, прямо говорящие о том, что вы не в теме пока банальной. Поэтому, лучше пока матчасть выучите.

[Doston]

$(".test").hover(function() {
  $(".test2").css("background","red");
  }, function() {
    $(".test2").css("background","black");
  }
);

Answer 1

[Дмитрий]

.test2{
    background-color: black;
    color: #fff;
}
.test:hover + .test2{
    background-color: blue;
}

Answer 2

[Николай]

Через :hover можно достучаться только до братьев или дочерних.

Правильно будет так.

.test:hover + .test2 {
color: yellow;
}

Answer 3

[Vitaliy Orlov]

.test:hover ~ .test2
{
    color:red;
}

Answer 4

[Алексей Коновалов]

https://jsfiddle.net/8pmxncw4/2/

Answer 5

[Марат Гарифуллин]

Если элементы далеко в верстке можно js

const test   = document.getElementsByClassName('test')[0];
const test2 = document.getElementsByClassName('test2')[0];
const defaultColor = test2.style.backgroundColor;
test.addEventListener('mouseenter', function() {
  test2.style.backgroundColor = 'red';
}, false);
test.addEventListener('mouseleave', function() {
  test2.style.backgroundColor = defaultColor;
}, false);

Answer 6

[Doston]

$(".test").hover(function() {
  $(".test2").css("background","red");
  }, function() {
    $(".test2").css("background","black");
  }
);