javascript - Tailwind CSS组悬停动画不起作用
问题描述
我是顺风 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>
解决方案
为了使您的动画正常工作,您必须关闭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>
推荐阅读
- docker - 如何配置 docker-compose.yml 根据某个文件校验和使 Docker 缓存失效
- julia - 如何在 Julia 中不使用不必要的括号进行评估?
- shopify - 使用 Shopify rest api 获取 ERR_TOO_MANY_REDIRECTS 失败
- javascript - 如何增加部分大小以适应表格、画廊或大元素?
- reactjs - react-grid-layout 并从外部拖动
- javascript - 使用 Javascript 在页面更改之前完成 CSS 动画
- python - Python 类型提示类作为对象或列表
- asp.net-core - Ubuntu 20.04 上的身份脚手架使用不正确的文件路径 dotnet 5
- c# - 有没有更有效的方法在我的数据库中插入数据数组?Asp.net-core + Dapper
- mysql - 图像未插入 MySQL。错误 1048