我最近在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/