I want to change multiple divs' background color when the parent div is hovered over. What I'm basically doing is creating a hamburger menu out of 3 divs, and wanting to change its color from black -> white when hovered.

My current solution is

```
.burger_container:hover  .bar1{
  background-color: white;
}
.burger_container:hover  .bar2{
  background-color: white;
}
.burger_container:hover  .bar3{
  background-color: white;
}

```

Another thing i considered was giving them another class id, such as

`<div class="bar bar3"></div>` , and then being able to do

```
.burger_container:hover  .bar{
  background-color: white;
}

```

is there a better way to do this for multiple childs? My solutions seem clunky. Let me know if one of the solutions i've posted is deemed "the correct way to do it". Cheers,