ReactJS/NextJS中如何实现汉堡菜单所有条hover时同步变色？

问题场景 #

在ReactJS/NextJS项目中实现汉堡菜单时，出现以下问题：鼠标悬停单条汉堡条时，仅当前条切换为红色，其余条保持原色。需要实现鼠标悬停汉堡菜单区域内任意位置，所有汉堡条同步变色的效果。

当前代码 #

JSX结构 #

<div className="burger-menu" onClick={updateMenu}>
  <div className={burgerClass} ></div>
  <div className={burgerClass} ></div>
  <div className={burgerClass} ></div>
</div>

（注：假设burgerClass的值为burger-bar）

CSS样式 #

.burger-bar:hover {
  background-color: #ff0000;
}

@media (max-width: 550px) {
  .burger-menu {
    display: inline;
    height: 100%;
    width: 3em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
  }
  
  .burger-bar {
    display: inline;
    width: 3em;
    height: 0.5em;
    background-color: #292f36;
    border-radius: 0.5rem;
    margin: 2px;
  }

  .nav-item {
    display: none;
  }
}

@media (max-width >= 550px) { /* 此处语法错误，需修正 */
  .burger-menu {
    display: none;
  }
  
  .burger-bar {
    display: none;
  }
}

解决方案 #

1. 调整hover选择器逻辑 #

将单个汉堡条的hover事件，改为监听父容器.burger-menu的hover状态，同时控制所有子元素.burger-bar的颜色变化。替换原有.burger-bar:hover规则：

/* 替换原有hover规则 */
.burger-menu:hover .burger-bar {
  background-color: #ff0000;
}

2. 修复媒体查询语法错误 #

原代码中@media (max-width >= 550px)是无效写法，需改为min-width匹配大屏设备：

@media (min-width: 550px) {
  .burger-menu {
    display: none;
  }
  
  .burger-bar {
    display: none;
  }
}

最终效果 #

修改后，鼠标只要进入.burger-menu容器的任意区域，三条汉堡条会同步变为红色；鼠标移出容器后，所有条恢复原色，完全符合需求。

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