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:

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

.menu{
  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;
}

.line{
  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!

Hi,

I would say that using nth-child() pseudo selector would allow the modifying of the elements within those divs.
Ex:
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.

2 Likes

Hi!

@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.