使用GatsbyImage实现鼠标悬停切换图片的最优方案是什么？

优先推荐纯CSS方案，无额外JS/第三方库依赖，性能最高，完全满足需求：

方案1：CSS叠加切换（最佳实践） #

利用两张图片层叠+hover状态切换透明度实现，逻辑简单无状态管理开销：

• 父容器设置相对定位，添加group类标记hover组
• 同时渲染两张GatsbyImage，均设为绝对定位撑满父容器
• 默认展示第一张图，第二张图透明度为0；hover时反转两张图的透明度，加上过渡属性实现平滑切换
  对应代码如下：

<div className="relative w-full h-full group">
  {/* 默认展示的首图 */}
  <GatsbyImage
    alt={firstImage?.altText ?? title}
    image={firstImage?.gatsbyImageData ?? storefrontImageData}
    loading={eager ? "eager" : "lazy"}
    className="absolute inset-0 object-cover object-center w-full h-full transition-opacity duration-300 group-hover:opacity-0"
  />
  {/* 悬停展示的第二张图，优先做非空判断避免报错 */}
  {secondImage && (
    <GatsbyImage
      alt={secondImage?.altText ?? title}
      image={secondImage?.gatsbyImageData}
      loading="lazy"
      className="absolute inset-0 object-cover object-center w-full h-full transition-opacity duration-300 opacity-0 group-hover:opacity-100"
    />
  )}
</div>

该方案优势：

• 完全由浏览器原生CSS处理hover逻辑，响应速度远快于JS监听
• 无额外状态、无组件重渲染开销
• 过渡效果可自由调整，修改duration-300的数值即可改变动画时长

方案2：JS状态控制（适用于复杂交互场景） #

如果后续需要在切换图片时同步触发其他逻辑，可以将鼠标事件绑定到GatsbyImage的父容器上，通过state控制当前展示的图片：

import { useState } from 'react'

// 组件内部逻辑
const [isHovered, setIsHovered] = useState(false)
const currentImage = isHovered && secondImage ? secondImage : firstImage

return (
  <div 
    className="w-full h-full"
    onMouseEnter={() => setIsHovered(true)}
    onMouseLeave={() => setIsHovered(false)}
  >
    <GatsbyImage
      alt={currentImage?.altText ?? title}
      image={currentImage?.gatsbyImageData ?? storefrontImageData}
      loading={eager ? "eager" : "lazy"}
      className="object-cover object-center w-full h-full transition-opacity duration-300"
    />
  </div>
)

内容的提问来源于stack exchange，提问作者user10229330