如何更改 tsx 中悬停时的图像？

Question

我有一个快速而小的问题，我试图在悬停时替换图片和现有图片，我看到的所有示例都使用链接，而我使用文件夹中的图片，如果您愿意，可以本地保存图片，所以我问这个，如果我有这样写的图像：

<div><img className='ApplicationSquareImg' src={mapSquare} alt="" /></div>

如何在悬停此图像时更改图像（例如，该图像将被称为mapSqaureTwo）？

Answer 1

我以前来过这里，我想我用过 OnMouseEnter 和 OnMouseLeave ，试试这个

<img
  src={mapSquare}
  onMouseEnter={() => {
    setMapSquare("yourHoverImg.png");
  }}

  onMouseOut={() => {
    setMapSquare("yourInitialImg.png");
  }}
/>