CSS悬停元素应触发相反的过渡

扎克·夏皮罗（Zack Shapiro）

我有一个带有“ +”的div，它在悬停时执行此操作：

.removal {
  opacity: 0;
  filter: alpha(opacity=0);
  margin-left: -10px;
  display: inline-block;
  -webkit-transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

.term:hover .removal {
  position: relative;
  left: 13px;
  opacity: 1;
  color: red;
  -webkit-transform: rotate(45deg);
  -webkit-animation: move 0.4s;
}

@-webkit-keyframes "move" {
  from {
    left: 3px;
    filter: alpha(opacity=0);
    opacity: 0;
  }
  to {
    left: 13px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
}

我遇到的问题是，当我将鼠标悬停在那个li上时，我希望CSS实质上撤消在中找到的动画move。

有关如何执行此操作的任何提示？我应该添加一个过渡.term（）上的类li吗？

这是一个JSfiddle

米拉德·侯赛因·帕纳西（Milad Hosseinpanahi）

.removal {
  opacity: 0;
  filter: alpha(opacity=0);
  margin-left: -10px;
  display: inline-block;
  -webkit-transform: rotate(0deg);
  -webkit-transition: all 1s ease-in-out;
  position:relative;
}

.term:hover .removal {
  opacity: 1;
  color: red;
  left:13px;
  -webkit-transform: rotate(45deg);
  filter: alpha(opacity=100);
}