我在按钮内有一个元素,当我将其悬停时以及当我单击父元素按钮时,我想为其设置动画。
为此,我使用 :not 和 :active 伪类在单击按钮后为元素设置动画,如下所示:
.box {
display: flex;
justify-content: center;
width: 20vw;
height: fit-content;
background-color: wheat;
}
.box:not(:active) .el {
transform: rotate(360deg);
transition: all 1s ease;
}
.el {
width: fit-content;
font-size: 100px;
border: solid thin pink;
}
.el:hover {
transform: rotate(360deg);
transition: all 1s ease;
}
<button class='box'><span class='el'>🐘</span></button>
当我这样做时,元素仅在我单击其父容器时旋转,而不是在我悬停 el 时旋转。
第一个动画似乎取消了悬停动画。我不知道为什么以及如何启用这两种动画状态。有解释吗?
没有js你就无法做到这一点。 CSS :当用户操作完成时,活动过渡将结束