鼠标悬停容器时同时切换菜单图标及文字颜色的实现疑问

要实现鼠标悬停在菜单容器上时，同步改变图标和文字颜色，只需调整CSS选择器逻辑，利用父元素:hover 后代元素的选择器实现联动效果：

修改后的CSS代码 #

.nav-item{
  display: inline-block;
  vertical-align: middle;
  height: 60px;
  margin: 5px;
}

#primary-logo{
    height: 50px;
}

.navbar{
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

.nav-list{
    list-style-type: none;
    padding-left: 0px;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    gap: 24px;
}

.menu-line{
    width: 34px;
    height:5px;
    background-color: black;
    margin: 6px 0px;
    /* 可选：添加过渡让颜色变化更平滑 */
    transition: background-color 0.2s ease;
}
.menu-item{
    display: inline-block;
    vertical-align: middle;
}
.menu-sec:hover{
    color: rgb(39, 42, 202);
    cursor: pointer;
}
/* 关键修改：父容器hover时同步修改子元素图标颜色 */
.menu-sec:hover .menu-line{
    background-color: rgb(39, 42, 202);
}

核心修改说明 #

• 删除原单独的.menu-line:hover规则，替换为.menu-sec:hover .menu-line：当鼠标悬停在整个菜单容器（.menu-sec）上时，所有子元素中的.menu-line都会触发背景色变化
• 保留.menu-sec:hover规则控制"Menu"文字颜色，实现图标与文字颜色的同步切换
• 可选添加transition属性，让颜色切换更自然流畅

HTML结构无需修改，保持原代码即可。

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