CSS3过渡效应

Question

我最近一直在研究CSS3，我做了一个设计只是为了好玩，有大量不必要的功能和效果。这是：

http://wendyhenrichs.com/could/

如果您查看顶部的导航栏，您会注意到当您将鼠标悬停在链接上时，它会以平滑的过渡动作向右移动7个像素。

但是请注意，当你将鼠标从链接上移开时，它会立即跳回原来的位置。

有没有什么方法可以让它以平滑的动作渐渐变回位置，因为它在之前移动了？

Answer 1

是的，有办法..给它position转换回

您已经在默认a上进行了转换，因此只需将nav a的相对位置设置为0即可;它也需要position: relative，所以如果你只是将position: relative置于默认状态，那么你只需在悬停状态下操纵左坐标

#nav ul li a {
  color: red;
  text-decoration: none;
  position: relative;
  left: 0;
}

#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li a:active {
  color: white;
  left: 7px;
}

工作示例：HERE