css3 webkit animation div：ホバー

webkit-animationと@ -webkit-keyframesでアニメーションを作ろうとしています。私はdiv内に子divをアニメーション化しています。css3 webkit animation div：ホバー

そして、私のマウスが子供の上にいるとき、私は親のWebkitアニメーションを停止します。

例はありますか？

おかげ

2011-07-02 Geraud Mathe

は残念ながらCSS、see hereには親セレクタはありません。親を選択して一時停止するように指示するには、少しのjavascriptを使用する必要があります。

CSSでの一時停止宣言はこのように書き：

-webkit-animation-play-state: paused | running;

はJavaScript（この場合はjQueryのは、）このようになります：

$(".child").hover(
    function(){ 
    $(this).parent().css("-webkit-animation-play-state", "paused"); 
}, 
    function(){ 
    $(this).parent().css("-webkit-animation-play-state", "running"); 
});

は、ここにライブデモを参照してください：

を

http://jsfiddle.net/UFepV/

出典

2011-07-04 05:02:24 Duopixel

私はこの質問と答えがちょっと古いと思っていますが、私の考えが間違っている場合に備えて、あなたはCSSで、 '.child：hover {-webkit-animation-play-state：paused; } '？それはJavascriptに頼らなくても動作しますか？ –

いいえ、あなたは子供を止めるように指示しているので、アニメーションされているものは親です。子供は本質的にそれがアニメーション化されていることを「知っていない」ことさえもしません。 – Duopixel

あなたは知っています、私は完全にホバー機能の '.parent（）'コールを見逃しました。おそらく1日の先祖セレクタが利用可能になるかもしれませんが、それまではこれが唯一の方法だと思います。 –

より複雑なラベルを使用する場合は、 Javascriptなしでこれを達成する。私は .parent:hover .child { -webkit-animation-play-state: paused; }を使用し、それは完全に働いた。

出典

2013-01-11 13:50:49

css3 webkit animation div：ホバー

答えて

関連する問題