Hover selector affecting more than one element

Hi every one!

I have a question, maybe is very easy but I don’t see the answer.

I created a simple hamburger menu using one div as container and three as the inner lines.

Something like that:

  <div class="menu">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: column;
  width: 50px;
  height: 50px;
  border: 2px solid black;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  padding: 5px;

  width: 40px;
  height: 4px;
  background: black;

The question is: How can I add in CSS a hover selector that affect the three .line divs (chaging color) at same time when I pass over the div .menu.
It’s posible?

Thanks a lot!


I would say that using nth-child() pseudo selector would allow the modifying of the elements within those divs.
div:first-child(1){ property: value; }

For the hover, CSS

div:hover{ property: value; }

Perhaps using inline css within the markup:

<div style="background-color: blue;">

Probably these examples would provide some clues in how to workout the challenge, thus into a solution.

@gasgen My brother, I think it is like this:

.menu:hover .line {
  background-color: red;

Did you want all lines to change at the same time or one at a time?

By the way, that is a pretty hamburger menu.



@clanmaster that solution will only serve the color of one line at time. And I want to change the colors of all the lines with only hover menu div.

@brandon_wallace! How are you?
That’s what I was looking for! Thanks!!!

Thanks!, I made a mistake, I wrote the box-sizing property on the body tag and it will be written in the .menu div. Adding a padding: 10px 5px it look better!.

Here an example.