如何通过将鼠标悬停在锚标记内来更改 fontawesome 图标的颜色？

Question

我在导航栏中遇到问题，在里面我放置了简历链接和图标来下载简历，如果我将鼠标悬停在简历上，那么只有简历获取颜色图标不会改变它的颜色，但如果我们将鼠标悬停到图标然后并且只有那时它才会改变它的颜色

这是我的反应代码

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;
}

我希望当有人将鼠标悬停在简历链接上时，图标也会改变颜色

Answer 1

.resume 类应用于 FontAwesomeIcon 组件，但悬停效果应用于 .resume:hover 选择器，这可能不够具体。

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

“此规则专门针对 .resume 类，当其父级 .nav-item 悬停在其上时。”