悬停而不返回正常状态[重复]答案

【问题标题】：hover without returning to normal state [duplicate]悬停而不返回正常状态[重复]
【发布时间】：2014-06-08 17:37:06
【问题描述】：

我对@987654324@ 状态有疑问。停止mouseover 后，我可以停止我从返回到原始状态的转换吗？

div {
  width:100px;
  height:100px;
  background:red;
  margin: 150px;
  -webkit-transition:all 1s; 
}

div:hover {
  border-radius:50%;
  -webkit-transform:rotate(1440deg);
}

Fiddle

这就是我所拥有的，但我不知道要添加什么来阻止整个事情处于循环状态。我只想要:hover 伪类来启动它。

【问题讨论】：

我们可以在 jsfiddle 上看到这个吗
自己做一个并不难。他很懒惰，不要成为自己的一员。 jsfiddle.net/U3nw4
参考这里stackoverflow.com/questions/17100235/…
:hover是不行的，如果不是:hover，状态会被转回。改用脚本。
@KingKing 他不希望元素恢复为正方形。他想在它悬停一次后让它保持在一个圆圈中。

标签： html css hover

【解决方案1】：

您需要使用 JavaScript。在悬停时添加一个类，并设置 CSS 规则如下：

element {
    transition: ....;
    old: state;
}

element.hovered-once {
    news: state;
}

当类被应用时过渡将激活，并且当鼠标离开时不要移除类。

【讨论】：