Question

我有一个带有“+”的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;
  }
}

我遇到的问题是当我将鼠标移开时，我希望CSS基本上撤消 move中的动画。

有关如何执行此操作的任何提示？我应该向.term（li上的班级）添加转换吗？

这是JSfiddle

Answer 1

.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);
}

jsFiddle here

Answer 2

由于我无法添加评论（需要愚蠢的50个声望点），我必须添加一个答案。

你已经有了“有效”的解决方案，但是...... ...你的标记不是非常“理想”，特别是从语义的角度来看（如果不与HTML5 doctype一起使用，甚至是无效的）。

我宁愿在没有这个“CSS噱头”的情况下这样做，而不是更“语义代码”。因此，您可以使用伪元素（:: before和:: after），至少对于某些浏览器也可以“动画” - 请参阅：http://css-tricks.com/transitions-and-animations-on-css-generated-content/

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

2 个答案: