我最近在CSS3上进行了大量研究,并且我做了很多有趣的设计,并添加了大量不必要的功能和效果。这里是:

http://wendyhenrichs.com/could/

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

但是请注意,当您将鼠标移离链接时,它将立即跳回到其原始位置。

有什么方法可以使它像以前一样平滑地退回原位?

最佳答案

是的,有一种方法..给它一个position过渡回

您已经在默认的a上进行了过渡,因此只需将nav a的相对位置设置回零即可;它也需要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

关于css - CSS3过渡效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6082314/

10-12 12:39
查看更多