Change menu icon when hovering over its container - html

Question

I am trying to build a nav bar. So here is the thing. What I want to do is to change both the color of menu icon and the word "menu" when hovering over their container.
I use background color to build this icon, so I cannot simply change background color to change the icon. Otherwise, the background of the whole container would be blue.
.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>

Answer 1

You can do it as below. I added this line .menu-sec:hover .menu-line {background-color: rgb(39, 42, 202)}. I also removed some duplicated lines.
.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-sec:hover .menu-line {
background-color: rgb(39, 42, 202);
}
<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>