如何在 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 {

  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 和文本将在同一时间以相同的方式表现。

Answer 2

您可以将“className”添加到 SVG 中的“路径”，因此在父 CSS 悬停中使用它：

<svg width="24" height="24">

      <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">

  <ul className="nav-links">

    <li>

      <div className="divHover">

        <a href="#">

          <DashboardIcon height={50} />

          Dashboard

        </a>

      </div>

    </li>

  </ul>

</div>

CSS：

a:hover .myIcon{

  fill: red;

}

或者：

.divHover:hover .myIcon{

   fill: red;

}