汉堡在悬停时仅切换一个栏变化答案

【问题标题】：Burger Toggle only One Bar Changes on Hover汉堡在悬停时仅切换一个栏变化
【发布时间】：2020-11-08 13:31:39
【问题描述】：

我目前正在为将要成为我的网站的导航栏工作，但我遇到了切换汉堡图标的问题。

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

相关代码

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

【问题讨论】：

标签： html css togglebutton

【解决方案1】：

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

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

原文：

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

你需要什么：

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

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

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

【讨论】：

【解决方案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;
    }

【讨论】：