我想设置一个 <a>
标签的动画,这样当它处于 :active
状态时它将向右移动,当回到常规状态时,它将动画回到左边 .
目前它是点击动画,但当我离开鼠标按钮它没有动画跳回来,我该如何反转动画?
Here is a simple example,请注意我必须使用 position:relative;left:20px
,因为在真实的应用程序中,此代码位于绝对定位的元素内,并且由于某种原因,使用保证金导致意外行为 .
我想设置一个 <a>
标签的动画,这样当它处于 :active
状态时它将向右移动,当回到常规状态时,它将动画回到左边 .
目前它是点击动画,但当我离开鼠标按钮它没有动画跳回来,我该如何反转动画?
Here is a simple example,请注意我必须使用 position:relative;left:20px
,因为在真实的应用程序中,此代码位于绝对定位的元素内,并且由于某种原因,使用保证金导致意外行为 .
2 回答
只需使用
left: 0;
fora
并在a
中使用position: relative;
而不是a:active
Demo
CSS
只是一个建议,点击移动链接会惹恼访客,为什么不在
hover
上使用它Demo
如果您的实时代码就像示例,您只需要将position:relative;并离开:0px;也是一个{}规则 .
发生的事情是当你停止悬停/释放点击时,它会失去位置:相对,因为它不在当前类上 . 如果没有位置规则,则忽略左侧规则 .