Tailwind CSS组悬停动画不起作用

【问题标题】：Tailwind css group hover animation not workingTailwind CSS组悬停动画不起作用
【发布时间】：2021-12-21 08:16:53
【问题描述】：

我是顺风 css 的新手。在这种情况下，悬停动画不起作用。当有人将鼠标悬停在组上时，我希望背景具有动画效果，但这并没有发生；而是始终显示背景颜色。

<li className=" text-gray  active:text-red group">
  <a href={`${href}`}>
    {name}
  </a>
  <div className="h-0.5 bg-red scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out" />
</li>

【问题讨论】：

标签： javascript reactjs tailwind-css tailwind-in-js

【解决方案1】：

为了让您的动画工作，您必须关闭div 并在其中放入一些内容；-) 例如，在这种情况下，使用您的代码 sn-p。更多关于group-hoverhere

<li className="text-gray active:text-red group">
  <a href={`${href}`}>{name}</a>
  <div className="h-0.5 bg-red scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out">
    It works!
  </div>
</li>

【讨论】：

还是不行
您必须将鼠标悬停在蓝点上，然后才能完美运行。
我使用 Next.js 和 Tailwind Css 来测试我的答案 sn-p 代码，它工作正常。