html - 当第二次悬停在对象上时,有什么方法可以触发不同的动画?
问题描述
当我第二次将鼠标悬停在元素上时,我想触发不同的动画,所以第一次会触发正常动画,但第二次悬停时会触发不同的动画
.star:hover{
animation: myAnim 2s ease 0s 1 normal forwards;
}
解决方案
您可以使用与第二个动画触发元素正上方的第一个动画触发相同大小的绝对定位覆盖元素来做到这一点。
通过将元素的 max-height 设置为 0 来结束第一个动画。
下次将鼠标悬停在该区域上时,下部元素的动画将触发。
HTML
<div class="container">
<div class="star-first">1st trigger</div>
<div class="star-second">2nd trigger</div>
</div>
没有定义动画的 CSS:
.container {
position; relative;
width: 50px;
height: 50px;
}
.container div {
width: 100%;
height: 100%;
}
.star-first {
position: absolute;
}
.star-first:hover {
animation: animation1 .... forwards; // set max-height: 0 at that animations end
}
.star-second:hover {
animation: animation2 ....;
}
推荐阅读
- postgresql - PostgreSQL 中的参数查询和 hstore
- asp.net - ASP.NET MVC 项目推送到远程服务器
- firebase - 如何在 Firestore 文档 Flutter 中向地图添加数据
- apache-tika - Apache Tika 服务器 - 请求标头参数?
- javascript - 无法使用 Plyr.js 触发结束事件
- ios - 在 swfitui 视图中将裁剪的 cvpixelbuffer 显示为 uiimage
- docker - Minikube 错误“加载缓存的图像:Docker 加载”
- r - R中数据框列的拆分和组合
- python - 截断文件的分组
- javascript - React_dom_development 在 Deno React 项目中未定义