CSS hover effect: changing parent and child background colors simultaneously

Question

HTML:

<div class="container">
  <div class="parent">one
    <div class="child">two</div>
  </div>
</div>

CSS:

.parent {
  background: red;
  height: 200px;
  width: 200px;
}
.child {
  background: green;
  height: 100px;
  width: 100px;
  margin-top: 50px;
  margin-left: 50px;
}
/* insted of apply individual */
/* .parent:hover {
     background: blue;
} 
  .child:hover {
    background: black;
  } 
*/

I want to change both parent and child background colours. when hover on parent(parent bg:blue, child bg:black). Here the problem is parent & child have the same property(background) but both have different background colours. how can I apply them simultaneously?

What it is *"simaltinasuly"*? – s.kuznetsov Jan 11 '21 at 04:07 — s.kuznetsov, Jan 11 '21 at 04:07
See this: https://codepen.io/manaskhandelwal1/pen/xxEadbB – Manas Khandelwal Jan 11 '21 at 04:12 — Manas Khandelwal, Jan 11 '21 at 04:12

score 1 · Accepted Answer · answered Jan 11 '21 at 04:09

You can change child hover color using this: .parent:hover .child

.parent {
  background: red;
  height: 200px;
  width: 200px;
}
.child {
  background: green;
  height: 100px;
  width: 100px;
  margin-top: 50px;
  margin-left: 50px;
}
/* insted of apply individual */
 .parent:hover {
  background: blue;
} 
.parent:hover .child {
  background: black;
}

<div class="container">
  <div class="parent">one
    <div class="child">two</div>
  </div>
</div>

Thanks @Minal Chauhan. It is working nicely. – abu abu Apr 21 '21 at 07:25 — abu abu, Apr 21 '21 at 07:25

CSS hover effect: changing parent and child background colors simultaneously

1 Answers1