：不是伪类取消：悬停动画

Question

我在按钮内有一个元素，当我将其悬停时以及当我单击父元素按钮时，我想为其设置动画。

为此，我使用 :not 和 :active 伪类在单击按钮后为元素设置动画，如下所示：

.box {
  display: flex;
  justify-content: center;
  width: 100vw;
  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;
}

<div class='box'><span class='el'>🐘</span></div>

当我这样做时，元素仅在我单击其父容器时旋转，而不是在我悬停 el 时旋转。

第一个动画似乎取消了悬停动画。我不知道为什么以及如何启用这两种动画状态。有解释吗？

Answer 1

没有js你就无法做到这一点。 CSS ：当用户操作完成时，活动过渡将结束

Answer 2

这是您想要完成的示例，但是当单击父元素时，

transition

属性在这种情况下将无法按预期工作，因为过渡仅应用于已更改的属性。由于

:active

状态仅在按下鼠标按钮时才处于活动状态，因此一旦释放鼠标按钮，则不再应用

:active

状态，因此转换不会完成。

.box {
  display: flex;
  justify-content: center;
  width: 35vw;
  height: fit-content;
  background-color: wheat;
}

.box: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;
}

<div class='box'><span class='el'>🐘</span></div>