reactjs 顺风css组悬停动画不工作

x33g5p2x 于 2022-11-04 发布在 React

关注(0)|答案(2)|浏览(198)

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

reactjs

来源：https://stackoverflow.com/questions/69884354/tailwind-css-group-hover-animation-not-working

2条答案

按热度按时间

h43kikqp1#

为了使动画工作，必须关闭div并在其中放入一些内容;- ）例如，使用您的代码片段。更多关于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>

赞(0）回复(0）举报 2022-11-04

5kgi1eie2#

您需要将group添加到父div中，以便group-hover在tailwind css中工作。

<li className="group 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>

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 顺风css组悬停动画不工作

2条答案

相关问题

热门标签

最新问答