如何在 React 中悬停时更改文本和 SVG 的颜色？

Question

所以我有以下 React 组件，在我的案例中充当导航栏。每当用户将鼠标悬停在导航栏项目上时，它必须将其颜色更改为指定的颜色。目前，导航栏项由 2 项组成：图标 (SVG) 和描述它的文本。

因此，将鼠标悬停在组件上必须同时更改文本和图标的颜色。

这是当前代码：

import { ReactComponent as DashboardIcon } from "../assets/ico_dashboard.svg";

<div className="navBar">
  <ul className="nav-links">
    <li>
      <div className="divHover">
        <a href="#">
          <DashboardIcon className="navLinkHolder" height={50} />
          Dashboard
        </a>
      </div>
    </li>
  </ul>
</div>

CSS：

a:hover {
  color: yellow;
}

使用此代码正在处理仪表板内的文本，但 SVG 没有改变其颜色。如何更改 SVG 的颜色？我也试过fill: yellow，但没用

Answer 1

编辑：此解决方案仅适用于内联 svg，因为浏览器也可以在 svg 的孩子上添加 fill 属性。这不是基本文本，因此 a 无法填充它们。

（您可以使用文本编辑器打开 svg 文件并复制其内容）

您也应该在 svg 类上应用 :hover 伪类！

navLinkHolder:hover {
  fill: yellow;
}

示例：

.mylink:hover {
  fill: orange;
  color: orange;
 }
 

<div>
  <a href="/" class="mylink">
    my link
    <svg width="24" height="24" class="mysvg">
      <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
    </svg>
  </a>
</div>

您也可以分离样式，但是像这样 svg 和文本将在同一时间以相同的方式表现。