reactjs - 在 Tailwind CSS 中使用悬停定位子元素

Question

我有一个父 div，里面有一个子图像元素。当我将鼠标悬停在父 div 上时，我希望我的子元素的 src 更改为不同的源。但我正在努力寻找一种顺风来做到这一点的方法。

    <button className="flex flex-col items-center justify-center w-40 h-40 mx-12 transition ease-in-out rounded-full shrink-0 text-primary hover:text-white hover:bg-light">
        <div className="relative flex items-center justify-center w-20 h-20 mb-2">
            <Image src={icon} alt={`${title} icon`} />
        </div>
        <span className="text-xl text-center">{title}</span>
    </button>

图像在悬停时应变为白色(不同来源)。如何使用 Tailwind 做到这一点？

Answer 1

这是一种解决方案，可让您预先设置两个图像并使用 group-hover 在它们之间切换。

<button class="relative flex flex-col items-center justify-center group w-20 h-20 m-12 rounded-full text-primary">
  <img class="absolute group-hover:invisible w-20 h-20 rounded-full" src="https://www.fillmurray.com/100/100"/>
  <img class="absolute invisible group-hover:visible w-20 h-20 rounded-full" src="https://www.fillmurray.com/g/100/100"/>
  <span class="absolute top-10 text-xl text-center text-green-500 group-hover:text-white">title</span>
</button>

您可以在此处的 Tailwind 沙箱中对其进行测试:https://play.tailwindcss.com/CCvbvcYNVv