汉堡菜单，如何改变十字颜色答案

【问题标题】：Hamburger menu, how to change color of cross汉堡菜单，如何改变十字颜色
【发布时间】：2016-10-22 11:14:20
【问题描述】：

我有问题该怎么办。我自己做了这个菜单上的 X 按钮有问题，一切都正确，但是当我尝试更改 X 的颜色时出现错误。我想将 X 的颜色更改为黑色。 Theres a code

<button class="js-menu menu" type="button">
    <span class="bar"></span>
</button>

<nav>
    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>       
    </ul>
</nav>

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

更改班级背景.active:after.active:before

.active & {
  background: none;
  &:after,
  &:before{
     background: red;
  }

http://codepen.io/pranesh-r/pen/gwkNwY

【讨论】：

【解决方案2】：

你可以用.active类改变颜色

.active & {
    background: none;
    &:before,
    &:after {
       top: 0;
       background:red
    }
}

【讨论】：

【解决方案3】：

将 background color 添加到 CSS 中的伪选择器。将以下内容添加到您的代码中

.active .bar::before, .active .bar::after {
    top: 0;
    background: #000;
}

【讨论】：