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フィドルデモ。

一般的な兄弟コンビネータをサポートするブラウザでは、先行する任意の兄弟要素を使用できます（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セレクター。