8

webkit-animation と @-webkit-keyframes でアニメーションを作ろうとしています。内部に子 div を含むアニメーション化された div があります。

そして、マウスが子の上にあるときに、親の webkit-animation を停止します。

例はありますか？

ありがとう

4

2 に答える 2

22

残念ながら、CSS には親セレクターがありません。こちら を参照してください。親を選択し、一時停止するように指示するには、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-04T05:02:24.260 に答える
8

より複雑なラベルを使用する場合は、Javascript なしでこれを実現できます。私は使用 .parent:hover .child { -webkit-animation-play-state: paused; }しましたが、完全に機能しました。

于 2013-01-11T13:50:49.080 に答える