@JomCol
Веб дизайнер

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

Привет, у меня возник довольно странный вопрос.
Допустим у меня есть 2 div
<div class='test'></div>

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


и теперь сам вопрос как сделать так чтоб когда мы наводим на класс test менялся цвет класса test2
  • Вопрос задан
  • 580 просмотров
Решения вопроса 6
@soledar10
html css3 js jquery
.test2{
    background-color: black;
    color: #fff;
}
.test:hover + .test2{
    background-color: blue;
}
Ответ написан
Комментировать
@nikolay_akhmetyanov
Front-end developer
Через :hover можно достучаться только до братьев или дочерних.

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

.test:hover + .test2 {
color: yellow;
}
Ответ написан
Комментировать
orlov0562
@orlov0562
I'm cool!
.test:hover ~ .test2
{
    color:red;
}


Ответ написан
Комментировать
@Alk90
php, mysql, jquery, css, html, api
Ответ написан
Комментировать
@magarif
Программист
Если элементы далеко в верстке можно 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);
Ответ написан
Комментировать
@Do-oN
$(".test").hover(function() {
  $(".test2").css("background","red");
  }, function() {
    $(".test2").css("background","black");
  }
);
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы