在 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.tai​​lwindcss.com/CCvbvcYNVv