实现Hover过渡后保持状态：div悬停旋转90度后不恢复原态

嘿，这个问题其实挺典型的——默认的:hover伪类就是个临时触发状态，鼠标一离开元素，伪类就失效了，自然会转回初始样式。要让旋转状态固定下来，核心就是把“临时状态”改成“持久状态”，给你两个靠谱的方案：

方法一：用JS添加持久类（兼容性拉满） #

这是最通用的做法，不管什么浏览器都能跑，步骤很简单：

第一步：修改CSS，用类代替:hover伪类 #

原来你可能是靠:hover来触发旋转，现在把旋转样式放到一个自定义类里，比如叫rotated：

.box {
  width: 100px;
  height: 100px;
  background: #f00;
  transition: transform 0.3s ease; /* 保留过渡动画，让旋转更丝滑 */
}

/* 把旋转样式绑定到类上，而不是hover */
.box.rotated {
  transform: rotate(90deg);
}

第二步：加几行JS，鼠标悬停时给元素加类 #

当鼠标第一次碰到元素时，给它加上rotated类——类一旦加上，除非你手动移除，否则会一直留在元素上，旋转状态也就保持住了：

// 找到你的box元素
const boxElement = document.querySelector('.box');

// 监听鼠标进入事件，添加类
boxElement.addEventListener('mouseenter', function() {
  this.classList.add('rotated');
});

要是之后想重置状态，比如点击元素恢复原样，再加个点击事件移除rotated类就行，非常灵活。

方法二：用CSS :has伪类（无JS，现代浏览器可用） #

如果你不需要兼容IE这类老浏览器，纯CSS就能搞定，用:has伪类来“记住”元素曾经被hover过的状态：

.box {
  width: 100px;
  height: 100px;
  background: #f00;
  transition: transform 0.3s ease;
}

/* 当box被hover过，就让它一直保持旋转 */
body:has(.box:hover) .box {
  transform: rotate(90deg);
}

原理是当box处于hover状态时，给父元素（这里用body）加个“标记”，之后即使鼠标离开，body的这个状态还能让box保持旋转。不过注意，:has伪类是较新的特性，Chrome、Firefox 121+、Safari都支持，但旧浏览器不行，得根据你的项目兼容性来选。

为啥原来的hover会恢复？ #

再补一句原理：:hover是动态状态伪类，只有鼠标停在元素上时才生效，鼠标离开后伪类自动取消，元素就会回到初始样式。我们的思路就是把这个临时的样式触发，改成持久的样式绑定（类或者父元素状态），这样就能固定住旋转效果啦。

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