3

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

4

2 回答 2

4 
.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在这里

于 2013-08-31T16:02:47.230 回答
0

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

您已经有了“可行的”解决方案，但是……
您的标记不是很“理想”，尤其是从语义的角度来看（如果不与 HTML5 doctype 一起使用，甚至无效）。

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

于 2013-08-31T16:53:06.793 回答