Tailwind CSS组悬停动画不起作用
Posted
技术标签:
【中文标题】Tailwind CSS组悬停动画不起作用【英文标题】:Tailwind css group hover animation not working 【发布时间】: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>
【问题讨论】:
【参考方案1】:为了让您的动画工作,您必须关闭div
并在其中放入一些内容;-) 例如,在这种情况下,使用您的代码 sn-p。更多关于group-hover
here
<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 代码,它工作正常。以上是关于Tailwind CSS组悬停动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章
我需要在css中有两个动画,一个在开始,一个在悬停,但它不起作用