使用GatsbyImage更改悬停图像的最佳方法

Question

我确实希望我的产品图像在鼠标悬停期间改变，但由于GatsbyImage不支持onMouseEnter道具，处理这种情况的最佳方法是什么?

ProductImage:

<GatsbyImage
alt={firstImage?.altText ?? title}
image={firstImage?.gatsbyImageData ?? storefrontImageData}
loading={eager ? "eager" : "lazy"}
className="object-cover object-center w-full h-full group-hover:opacity-75"
/>
</div>

其中firstImage是数组中的第一个对象，secondImage将是图像数组中的第二个图像/对象，从Shopify中提取，当悬停时需要成为活动图像。

我正在考虑一个解决方案，使两个div在每一个独特的图像，只是激活和动画第二个div使用帧运动时悬停(使用条件渲染)。但就我而言，这不是一个干净的方法……我想遵循最佳实践，但我仍在学习很多，所以这就是为什么我要求一些帮助:)

Answer 1

您可以创建一个侦听onMouseEnter/onMouseLeave事件的包装器div:

const [activeImage, setActiveImage]= useState("gatsby");
// ...
<div onMouseEnter={setActiveImage("store")} onMouseLeave={setActiveImage("gatsby")}>
{activeImage === "gatsby" ? <GatsbyImage
alt={firstImage?.altText ?? title}
image={firstImage?.gatsbyImageData}
loading={eager ? "eager" : "lazy"}
className="object-cover object-center w-full h-full group-hover:opacity-75"
/> : <GatsbyImage
alt={"Second Image"}
image={storefrontImageData}
loading={eager ? "eager" : "lazy"}
className="object-cover object-center w-full h-full group-hover:opacity-75"
/>}
</div>

你的setActiveImage可以是你需要的任何东西，在这种情况下，我已经设置了一个函数，在gatsby和store之间变化，以表示目的，但可以是布尔值等。