1

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

4

1 回答 1

0

为了使您的动画正常工作,您必须关闭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>
于 2021-11-08T14:22:50.527 回答