顺风中的目标子元素

Question

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

<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

顺风中的目标子元素

Target child element in tailwind

reactjs

tailwind-css