Question

我在悬停时有以下风格：

li:hover a {
    left: 65px;
}

我知道我可以用jQuery制作动画，但是它可以单独用CSS3制作动画吗？

这确实不工作：

li:hover a {
    left: 65px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Answer 1

你必须使用这个css：

li:hover { 

    left: 0px;

}

li:hover a {

    left: 65px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Answer 2

如果你想使用＆＃39; left＆＃39;你必须设置位置。否则使用＆＃39; margin-left＆＃39;

这是一个例子：FIDDLE

仅使用CSS动画位置

2 个答案: