How to change background of child element when parent element is hovered?

Question

I have the next html structure:

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

And css:

.parent {
    width: 100px;
    height: 100px;
}

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

.child {
    width: 50px;
    height: 50px;
}

How can I change background color of child div when its parent div is hovered? Can I do it with css or I shoud use JQuery?

I see that many others have answered already. But if you would like to know more consider reading [This Link](https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) — Chris Aby Antony, Jun 19 '18 at 09:15

Shiladitya · Accepted Answer · 2018-06-19T09:16:20.953

4

Here you go with a solution

.parent {
  background-color: green;
  width: 100px;
  height: 100px;
}

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

.child {
  width: 50px;
  height: 50px;
}

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

Hope this will help you.

edited Jun 19 '18 at 09:16

answered Jun 19 '18 at 09:12

Shiladitya

12,003
15
25
38

score 2 · Answer 2 · answered Jun 19 '18 at 09:11

2

You can try this

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

answered Jun 19 '18 at 09:11

charan kumar

2,119
2
20
26

score 1 · Answer 3 · answered Jun 19 '18 at 09:12

Try This:

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

.parent {
  width: 100px;
  height: 100px;
}

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

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

.child {
  width: 50px;
  height: 50px;
}

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

score 1 · Answer 4 · answered Jun 19 '18 at 09:14

1

If I understand you correctly, you just need to change

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

to

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

answered Jun 19 '18 at 09:14

Prawns

61
6

score 1 · Answer 5 · answered Jun 19 '18 at 09:15

Add a new rule for .parent:hover .child

Check the example below:

.parent {
    width: 100px;
    height: 100px;
    background-color:blue;
}

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

.child {
    width: 50px;
    height: 50px;
}

.child {
background-color:yellow;
}

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

How to change background of child element when parent element is hovered?

5 Answers5