我在导航栏面临的问题，在那里我已经把简历链接和图标下载简历，在样式如果我悬停在简历然后只有简历得到颜色图标不改变它的颜色，但如果我们悬停到图标然后只有然后它改变它的颜色
这是我的react代码

function Navbar() {
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div className="container-fluid">
                <a className="navbar-brand" href="/">Sahil</a>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <FontAwesomeIcon icon={faBars} style={{ color: "#000", }} />
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li className="nav-item">
                            <a className="nav-link text-white" aria-current="page" href="#home">Home</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link text-white" href="#About">About</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link text-white" href="#Project">Project</a>
                        </li>
                        <li className="nav-item ">
                            <a className="nav-link text-white" href="../Sahil_Resume.pdf" download={"SahilResume"}>
                                Resume <FontAwesomeIcon className='resume' icon={faDownload} style={{color: "#000",}} />
                            </a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link text-white" href="#Contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    )
}

字符串
这是我用的css

.navbar{
  background-color: var(--secondaryColor) !important;
  box-shadow: 0px -10px 20px 0px black;
}

.navbar-brand{
  color: var(--primaryDefColor) !important;
}
.navbar-brand:hover{
  color: var(--primaryColor) !important;
  transition: color 0.5s ease-in-out;
}

.nav-link {
  border-bottom: 3px solid white;
  color: var(--primaryDefColor) !important;
}

.resume:hover{
  color: var(--primaryColor) !important;
  transition: color .5s ease-in-out;
}

.navbar-nav>li>a:hover {
  color: var(--primaryColor) !important;
  border-bottom: 3px solid var(--primaryColor) !important;
  transition: border-bottom, color .5s ease-in-out;
}

型
我期待当有人悬停在简历链接然后图标也改变它的颜色