汉堡切换按钮Hover时仅单条改变的问题修复求助

Hey there! I see the problem with your hamburger menu—right now, only the individual bar you hover over changes color, but you want all three to sync up when you hover anywhere on the toggle button. Let's fix that quickly.

What's Causing the Issue? #

Your current CSS targets .toggle-button .bar:hover, which only applies the color change to the specific bar your mouse is directly over. Instead, we need to trigger the color change for all bars when the entire toggle button container is hovered.

Updated CSS Solution #

Replace your bar hover rule with this one, and keep the rest of your CSS as is:

.toggle-button:hover .bar {
  background-color: black;
}

Full Modified CSS #

Here's the complete CSS with the fix included:

.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;
}
/* This is the updated rule */
.toggle-button:hover .bar {
 background-color: black;
}

How It Works #

The selector .toggle-button:hover .bar means: "When the .toggle-button is being hovered, apply this style to all its child .bar elements." Now, whenever you hover anywhere on the toggle button (even the space between bars), all three bars will switch to black at the same time, matching the button's background change perfectly.

内容的提问来源于stack exchange，提问作者Daniel Zhang