Burger Toggle only One Bar Changes on Hover - html

Question

I'm currently working on a navbar for what's going to be my website, but I'm having problems with the toggle burger icon.
I would like for to have all three bars of the toggle button to change at the same time while hovering over it, but only of them changes at a time when I hover over it.
Relevant Code
HTML
<div class='toggle-button' onClick={() => setOpen(!open)}>
<div class='bar' />
<div class='bar' />
<div class='bar' />
</div>
CSS
.toggle-button {
border: 1px solid grey;
border-radius: 5px;
cursor: pointer;
display: inline-block;
height: fit-content;
transition: all 0.5s ease;
}
.toggle-button:hover {
background-color: black;
}
.toggle-button .bar {
background-color: grey;
border-radius: 2.5px;
margin: 4px;
height: 4px;
width: 25px;
}
.toggle-button .bar:hover {
background-color: black;
}

Answer 1

That's because the selector you used is used for inheritance.
That, and your :hover should be on the .toggle-button class, otherwise the style will change when you hover on the bar and not the full div.
Original:
.toggle-button .bar:hover {
background-color: black;
}
What you need:
.toggle-button:hover > .bar {
background-color: gray;
}
Also, I changed the color to gray so the bars won't blend with the rest of the button.
If you need more information I'm happy to explain.

Answer 2

If I understand correctly what you are trying to accomplish is to change to color of the 3 lines .bar on hover.
You will need to do it as follows:
.toggle-button {
border: 1px solid grey;
border-radius: 5px;
cursor: pointer;
display: inline-block;
height: fit-content;
transition: all 0.5s ease;
}
.toggle-button .bar {
background-color: grey;
border-radius: 2.5px;
margin: 4px;
height: 4px;
width: 25px;
}
.toggle-button:hover .bar {
background-color: black;
}