使用:not伪类导致:hover动画失效，如何同时启用两种动画状态？

问题根源 #

1. 选择器权重覆盖：.box:not(:active) .el是父类选择器+后代类选择器的组合，权重高于单独的.el:hover（类选择器+伪类），导致hover样式被完全覆盖。
2. 初始状态错误：你给非激活状态的父元素下的.el直接设置了rotate(360deg)，这意味着元素默认就处于旋转完成的状态，hover时再设置相同的旋转值，没有状态变化，自然看不到动画。

修正后的代码 #

CSS #

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

.el {
  width: fit-content;
  font-size: 100px;
  border: solid thin pink;
  /* 默认不旋转，把过渡属性统一写在这里 */
  transform: rotate(0deg);
  transition: all 1s ease;
}

/* 鼠标悬停时旋转 */
.el:hover {
  transform: rotate(360deg);
}

/* 父元素被点击激活时旋转 */
.box:active .el {
  transform: rotate(360deg);
}

HTML #

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

说明 #

• 把过渡属性放在.el的默认样式里，避免重复代码，同时保证状态切换时都能触发过渡动画。
• 明确默认状态为rotate(0deg)，这样hover或父元素active时，从0度转到360度，就能看到完整的旋转动画。
• 两个触发条件（hover和父元素active）的选择器权重一致，不会互相覆盖，各自的状态都能正常生效。

内容的提问来源于stack exchange，提问作者Willem JOURET