我正在试着建一个导航台.事情是这样的.我想要做的是，当鼠标悬停在它们的容器上时，改变菜单图标和单词"Menu"的 colored颜色 . 我使用背景 colored颜色 来构建这个图标，所以我不能简单地通过更改背景 colored颜色 来更改图标.否则，整个容器的背景将为蓝色.
.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;
}
.menu-item{
display: inline-block;
vertical-align: middle;
}
.menu-sec:hover{
color: rgb(39, 42, 202);
cursor: pointer;
}
.menu-line:hover{
width: 34px;
height:5px;
background-color: rgb(39, 42, 202);
margin: 6px 0px;
}<nav>
<div class="nav-item">
<img
id="primary-logo"
src="800px-The_Economist_Logo.svg.png"
alt="Economist Logo"
/>
</div>
<div class="navbar nav-item">
<ul class="nav-list">
<li class="menu-sec">
<div class="menu-item"> <!-- menu icon -->
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
<div class="menu-item">Menu</div>
</li>
<li>Weekly edition</li>
<li>Search</li>
</ul>
</div>
</nav>