悬停而不恢复正常状态

Question

我对:hover州有疑问。停止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伪类启动它。

Answer 1

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

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

element.hovered-once {
    news: state;
}

当课程被应用时，过渡将激活，当鼠标离开时，不会删除课程。