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 Fiddle demo

或使用前一个兄弟元素：

#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 Fiddle demo

在那些支持通用兄弟组合器的浏览器中，您可以使用任何前面的兄弟元素（只要您可以使用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 Fiddle demo

参考文献：

CSS - 动画悬停问题

1 个答案: