1

Как при наведении на родителя добавить класс ребенку?

<div class="parent">
    <div class="child"></div>
</div>

2 ответа 2

3

Если действительно нужно именно добавить класс - то как то так, при помощи событий mouseover и mouseout:

let p = document.querySelector(".parent");
let c = document.querySelectorAll(".child");
p.addEventListener('mouseover', e => c.forEach(a => a.classList.add("hover")));
p.addEventListener('mouseout', e => c.forEach(a => a.classList.remove("hover")));

let p = document.querySelector(".parent");
let c = document.querySelectorAll(".child");
p.addEventListener('mouseover', e => c.forEach(a => a.classList.add("hover")));
p.addEventListener('mouseout', e => c.forEach(a => a.classList.remove("hover")));
.parent {
  width:300px;
  height:150px;
  border:solid;
}

.child {
  margin:33px;
  width:30px;
  height:30px;
  background-color:wheat;
  transition:1s;
  display:inline-block;
}

.hover {
  transform:rotate(45deg);
  border-radius:50%;
  background-color:red;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>


Но если нужно просто применить другой стиль, то можно и css ом обойтись:

.parent:hover .child {
  background-color:red;
}

.parent {
  width:300px;
  height:150px;
  border:solid;
}

.child {
  margin:33px;
  width:30px;
  height:30px;
  background-color:wheat;
  transition:1s;
  display:inline-block;
}

.parent:hover .child{
  transform:rotate(45deg);
  border-radius:50%;
  background-color:red;
}
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

код выше сработает на потомке любой вложенности с классом .child, если необходим потомок только первого уровня можно написать так:

div.parent:hover > .child {
    background-color: red;
}
0
1

$('.parent').hover(function() {
  $(this).find('.child').css('background-color', '#f00');
}, function() {
  $(this).find('.child').css('background-color', '#e2e2e2');
});
div {
  border: 1px solid black;
  margin: 15px;
  display: inline-block;
}

.parent {
  width: 150px;
  height: 150px;
  background-color: #e2e2e2;
}

.child {
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.