顺风中的目标子元素答案

【问题标题】：Target child element with hover in Tailwind CSS顺风中的目标子元素
【发布时间】：2022-01-12 01:17:44
【问题描述】：

我有一个父 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>

悬停时图像应变为白色（不同来源）。如何顺风做到这一点

【问题讨论】：

我认为这要么是 javascript 的工作，要么不使用图像而是 div 的背景
我愿意使用 div 的背景，但我不知道如何在顺风 @Wraithy 中做到这一点
你可以使用<div className="bg-[url('/img/hero-pattern.svg')]">
@Wraithy 我试过了，但它在一个循环中，所以 url 是动态的，字符串插值在某种程度上不适用于顺风。

标签： reactjs tailwind-css

【解决方案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

【讨论】：