汉堡悬停时仅切换一栏更改

Question

我目前正在为我的网站制作导航栏，但切换汉堡图标时遇到问题。

我希望在将鼠标悬停在切换按钮上时同时更改切换按钮的所有三个栏，但当我将鼠标悬停在其上时，一次只有其中一个更改。

相关代码

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

那是因为你使用的选择器用于继承。

那个，你的 :hover 应该在 .toggle-button class 上，否则当你 hover 在栏上而不是完整时样式会改变div.

原文：

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

您需要：

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

此外，我将颜色更改为灰色，这样条形就不会与按钮的其余部分混合。

如果您需要更多信息，我很乐意为您解释。

Answer 2

如果我理解正确的话，你想要完成的是在悬停时更改 3 行 .bar 的颜色。

您需要按如下方式进行：

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

汉堡悬停时仅切换一栏更改

Burger Toggle only One Bar Changes on Hover

html

css

togglebutton

相关代码