用悬停改变css属性

Question

我正在尝试使用悬停将对象移动到页面的另一部分。问题是，即使我的光标不再指向该对象，我仍希望它保持在新位置。 有没有办法永久地使用 css 更改css属性？

为了测试，我试图移动的对象具有id“movingFly” （这是一个只有字母E的div）

* {
  padding: 0px;
  margin: 0px;
}
@font-face{

font-family:fly1;
 src:url('Insects.ttf');

}
#movingFly {
  font-family: fly2;
  font-size: 150px;
  float: left;
  position: absolute;
  z-index: 1;
}
#movingFly:hover {
  transform: translate(200px, 100px);
  transition: all 2s;
}

<div id="movingFly">E</div>

我尝试使用变换来重新定位它，但是从光标移动后它不会保持在新的位置。