Question

我不确定我是否累了或者是什么，但是当用户悬停链接时，我试图让一个小箭头（▶）从左向右移动。

这是我的CSS：

a:after {
    transition: transform 1s ease-in-out;
    content: "▶";
}

a:hover:after {
    transform: translateX(20px);
}

当悬停链接时箭头开始移动，但是一旦它向右移动了20px，它立即跳回原来的位置，即使我仍然在盘旋链接。

为什么会这样？

http://jsfiddle.net/tzyorz12/

Answer 1

您需要修改布局：

＆＃13;

a:after {
  transform: translateX(0) translateY(0);
  content: " ▶";
  display:inline-block;
}

a:hover:after {
  transform:translateX(20px) translateY(0); 
  transition: transform 1s ease-in-out;
}

＆＃13;

<a href="#">Foo</a>

＆＃13;

如果您希望箭头保留在转换结束时，您可以使用动画或在未覆盖状态下设置很长的转换：

＆＃13;

a:after {
  transform: translateX(0) translateY(0);
  transition: transform 10000000s ease-in-out;/* freeze effect on such a long time */
  content: " ▶";
  display:inline-block;
}
a:hover:after {
  transform:translateX(20px) translateY(0); 
  transition: transform 1s ease-in-out;
}

＆＃13;

<a href="#">Foo</a>

＆＃13;

Answer 2

显然我累了。内联元素似乎无法转换（至少可靠）。将display: inline-block添加到伪元素解决了我的问题。

Answer 3

通过添加display: inline-block;

来修复

检查更新的小提琴http://jsfiddle.net/dyaa/tzyorz12/2/

Answer 4

a:after {
    position: absolute;
    transform: translateX(0) translateY(0);
    transition: transform 1s ease-in-out;
    content: "▶";
}

a:hover:after {
    transform: translateX(20px);
}

<a href="#">Foaaao</a>
<br>
<a href="#">F0o</a>
<br>
<a href="#">F0asdsdo</a>
<br>
<a href="#">F0gggggggo</a>

Answer 5

只需添加：

position: absolute;

代表transform

演示： http://jsfiddle.net/tzyorz12/1/

CSS转换在完成后移回

5 个答案: