如何在 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，因为浏览器也能够在的孩子上添加该fill属性。svg这不是基本文本，因此a无法填写。（您可以使用文本编辑器打开 svg 文件并复制其内容）您也应该:hover在 svg 类上应用伪类！navLinkHolder:hover {&nbsp; fill: yellow;}例子：.mylink:hover {&nbsp; fill: orange;&nbsp; color: orange;&nbsp;}&nbsp;<div>&nbsp; <a href="/" class="mylink">&nbsp; &nbsp; my link&nbsp; &nbsp; <svg width="24" height="24" class="mysvg">&nbsp; &nbsp; &nbsp; <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>&nbsp; &nbsp; </svg>&nbsp; </a></div>您也可以分离样式，但是像这样 svg 和文本将在同一时间以相同的方式表现。

Answer 2

您可以将“className”添加到 SVG 中的“路径”，因此在父 CSS 悬停中使用它：<svg width="24" height="24">&nbsp; &nbsp; &nbsp; <path className="myIcon" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg>import { ReactComponent as DashboardIcon } from "../assets/ico_dashboard.svg";<div className="navBar">&nbsp; <ul className="nav-links">&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <div className="divHover">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DashboardIcon height={50} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dashboard&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </li>&nbsp; </ul></div>CSS：a:hover .myIcon{&nbsp; fill: red;}或者：.divHover:hover .myIcon{&nbsp; &nbsp;fill: red;}