animation - CSS - 动画悬停问题

Question

只有当用户将鼠标悬停在 div 上时，我才有动画工作的问题。我做了一个jsfiddle：http: //jsfiddle.net/HBfLY/1/

所以我希望它从左边反弹，但它正在闪烁。我做错了什么？

Answer 1

您遇到的问题是，一旦元素由于动画而改变其位置，它就不再被光标悬停，因此:hover选择器不再适用。

要解决这个问题，您可以将 应用于:hover祖先元素：

body:hover #animatie1 {
    border: 5px solid black;
    position:relative;
    top: 20px;
    left:100px;
    width:100px;
    height: 200px;
    animation:mymove 2s ;
    -moz-animation:mymove 2s ; /* Firefox */
    -webkit-animation:mymove 2s ; /* Safari and Chrome */
    -o-animation:mymove 2s ; /* Opera */
}

JS 小提琴演示。

或者使用前面的兄弟元素：

#immediatelyPrecedingSibling:hover + #animatie1 {
    border: 5px solid black;
    position:relative;
    top: 20px;
    left:100px;
    width:100px;
    height: 200px;
    animation:mymove 2s ;
    -moz-animation:mymove 2s ; /* Firefox */
    -webkit-animation:mymove 2s ; /* Safari and Chrome */
    -o-animation:mymove 2s ; /* Opera */
}

JS 小提琴演示。

在那些支持 general-sibling 组合符的浏览器中，您可以使用任何前面的兄弟元素（只要您可以使用 CSS 定位它，并且重申一下，这个兄弟元素在 DOM 中要定位的元素之前）：

#notAnImmediatelyPrecedingSibling:hover ~ #animatie1 {
    border: 5px solid black;
    position:relative;
    top: 20px;
    left:100px;
    width:100px;
    height: 200px;
    animation:mymove 2s ;
    -moz-animation:mymove 2s ; /* Firefox */
    -webkit-animation:mymove 2s ; /* Safari and Chrome */
    -o-animation:mymove 2s ; /* Opera */
}

JS 小提琴演示。

参考：

• 浏览器对通用兄弟~组合器的支持。
• CSS 3 级选择器。