Как при наведении на родителя добавить класс ребенку?
<div class="parent">
<div class="child"></div>
</div>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсли действительно нужно именно добавить класс - то как то так, при помощи событий 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;
}
$('.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>