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

Question

我确实希望我的产品图片在鼠标悬停期间发生变化，但由于 GatsbyImage 不支持 onMouseEnter 属性，处理此问题的最佳方法是什么？

产品图片：

<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 将是图像数组中的第二个 image/object，从 Shopify 中提取，悬停时需要是活动图像。

我正在考虑一种解决方案，使两个 div 中的每一个都有一个独特的图像，并且只需在悬停时使用 Framer Motion 激活和动画第二个 div（使用条件渲染).但就我而言，这不是一种干净的方法。我想遵循最佳实践，但我仍在学习很多东西，所以这就是我寻求帮助的原因:)

Answer 1

您可以只创建一个包装器 div 来监听 onMouseEnter/onMouseLeave 事件：

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 之间变化的函数来表示目的，但可以是布尔值，等等

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

Best way to change image on hover using GatsbyImage

reactjs

gatsby

gatsby-image