导航栏锚点标签悬停时，如何同步改变内部FontAwesome图标颜色？

问题描述 #

导航栏内的Resume下载链接搭配FontAwesome下载图标，当前存在样式问题：鼠标悬停Resume文字时仅文字变色，图标无变化；只有直接悬停图标时，图标才会变色。需要实现鼠标悬停整个Resume链接区域时，文字和图标同步变色。

现有代码 #

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

解决方案 #

修改CSS样式 #

核心是利用CSS后代选择器，在.nav-link的悬停状态下控制内部.resume图标的颜色，替换原有的.resume:hover规则（或保留以支持单独悬停图标的变色）：

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

/* 新增/修改：当整个链接悬停时，同步改变图标颜色 */
.nav-link:hover .resume{
  color: var(--primaryColor) !important;
  transition: color .5s ease-in-out;
}

/* 可选：保留单独悬停图标时的变色效果 */
.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;
}

优化React代码（可选） #

移除FontAwesomeIcon上的内联style={{color: "#000",}}，让CSS统一控制颜色，避免样式优先级冲突：

<FontAwesomeIcon className='resume' icon={faDownload} />

原理说明 #

原代码中.resume:hover仅在鼠标直接悬停图标元素时触发颜色变化，而通过.nav-link:hover .resume规则，当鼠标悬停整个链接（父元素）时，会自动选中内部的图标元素并应用变色样式，实现文字和图标同步响应悬停操作。

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