Tailwind css 组悬停动画不起作用

Question

我是顺风 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>

Answer 1

为了让您的动画工作，您必须关闭div并将某些内容放入其中 ;-) 例如，在这种情况下，使用您的代码片段。 更多关于group-hover在这里

---

<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>