Question

我见过几个类似于我的问题，但没有真正的答案。有没有办法防止鼠标悬停后重击？

这是我的例子...... http://jsfiddle.net/vX7CV/8/

如果您从元素中取消悬停，它只会快速回到原来的填充而不是动画

Answer 1

ul {
    background-color:black;
    color:white;
    width: 100px;
    height:100px;
    -webkit-transition: padding 0.2s ease-in-out;
}  

ul:hover {
    padding-bottom: 35px;
}

//OR

ul {
    background-color:black;
    color:white;
    width: 100px;
    height:100px;
    -webkit-transition: padding 0.2s ease-in-out;

}     
ul:hover {
    padding-bottom: 35px;
}

Answer 2

你可以在使用过渡而不是动画之后实现你的目标（这似乎更相关，因为它是悬停事件）。我已经分了你的例子：http://jsfiddle.net/cherryflavourpez/fxL8U/

CSS3动画Snap Back

2 个答案: