CSS:active过渡被:hover终止问题及纯CSS解决方案需求

修改后的CSS代码如下：

.thingy{
  display:inline-block;
  position:relative;
  width: 5em;
  height: 5em;
  background-color:#FF0000;
  left:0em;
  transition: left 4s linear, background-color 4s;
}

.thingy:active{
  left:10em;
  transition: left 0s linear, background-color 4s;
}

.thingy:hover{
  background-color:#00FF00;
  transition: left 4s linear, background-color 0s linear;
}

问题根源 #

原代码的bug在于：当元素处于从active状态返回初始位置的过渡过程中（left正从10em向0em动画），触发hover时，.thingy:hover规则仅定义了background-color的过渡，未指定left的过渡属性。根据CSS过渡规则，未在新状态中声明的过渡属性会使用默认的0s过渡，这直接终止了left的动画，导致元素瞬间弹回原位。

修改说明 #

• 在.thingy:hover中补充left: 4s linear的过渡参数，与初始状态的left过渡一致，确保hover时left的动画不受干扰，继续完成剩余的位移过程。
• 在.thingy:active中添加background-color 4s的过渡，避免点击元素时背景色突然跳转，保持视觉连贯性。

修改后，元素在返回初始位置的过程中被hover时，会立刻切换为绿色背景，同时继续向右→左的位移；hover结束后，背景色会以4秒时长淡回红色，所有过渡过程互不干扰。

内容的提问来源于stack exchange，提问作者44a3