javascript - 如何在鼠标悬停时做出反应 FontAwesomeIcon 不改变颜色

Question

我有一个黑色背景的页面，我使用 React FontAwesome 放置了一个类似的白色图标

<Link to={'/'} className={classes.homeButtonLink}>
  <FontAwesomeIcon icon={faHome} size="2x"/>
</Link>

鼠标在图标上变黑，我看不到它。如何让图标不变色？我已经尝试将 css 应用于图标和链接，但没有运气。

Answer 1

我试过这段代码。FontAwesome Icon 在鼠标悬停时不会改变颜色。它只会在鼠标点击时改变颜色。你能用给定的代码重现你的行为吗？

import { BrowserRouter, Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome } from "@fortawesome/free-solid-svg-icons";

import "./styles.css";

const element = (
  <BrowserRouter>
    <Link to={"/"}>
      <FontAwesomeIcon icon={faHome} size="6x" />
    </Link>
  </BrowserRouter>
);