NextJS应用中group-hover样式失效问题求助

问题根源：Tailwind的group-hover伪类需要父元素添加group类作为hover触发的容器标识，你的代码里Icon组件的直接父级<Link>没有设置group类，导致子元素的group-hover无法感知父级的hover状态；替换为hover时是作用在Icon自身，所以能正常生效。

修复步骤 #

在<Link>组件的className中添加group类即可：

<Link
  href={href}
  className="group flex text-center text-lg font-medium text-zinc-800 transition dark:text-zinc-200 hover:text-teal-500 dark:hover:text-teal-500"
>
  <Icon className="h-8 w-8 flex-none fill-zinc-800 dark:fill-zinc-200 transition group-hover:fill-teal-500 dark:group-hover:fill-teal-500" />
  <span className="ml-4">{children}</span>
</Link>

原理说明 #

• group类是Tailwind用来标记hover触发上下文的特殊类，只有父级设置了这个类，子元素的group-hover:*样式才会在父级hover时生效。
• 之前使用hover:fill-teal-500是直接监听Icon自身的hover事件，和父级无关，所以能正常工作，但group-hover需要依赖父级的hover状态，必须配合group类使用。

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