当前位置：文江博客话题详情

CSS3 过渡效果

发布于 2024-11-09 01:21:05 字数 314 浏览 0 评论 0原文

我最近对 CSS3 进行了大量的研究，并且我做了一个设计只是为了好玩，其中包含了大量不必要的功能和效果。这里是：

http://wendyhenrichs.com/could/

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

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

有没有办法让它以平滑的动作淡出回到原来的位置，就像之前移动的那样？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黯淡〆 2024-11-16 01:21:05

是的，有一种方法..给它一个 position 来转换回

默认的 a 上已经有的转换，所以只需设置 nav a s相对位置回到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;
}

工作示例：此处

Yes there's a way.. give it a position to transition back to

you already have the transition on the default a so just set the nav as relative position to back to 0; it will need position: relative too, so if you just put position: relative on the default state, then you just manipulate the left co-ordinate on the hover state

#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;
}