анимация css3 остановка на div: hover - PullRequest
Новая
       11

анимация css3 остановка на div: hover

8 голосов
/ 02 июля 2011

Я пытаюсь сделать анимацию с помощью webkit-animation и @ -webkit-keyframes. У меня есть div, анимированный с дочерним div внутри.

И я бы остановил webkit-анимацию родителя, когда моя мышь находится над ребенком.

Есть ли примеры?

Спасибо

Ответы [ 2 ]

22 голосов
/ 04 июля 2011

К сожалению, в 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/

8 голосов
/ 11 января 2013

Если вы используете более сложную метку, вы можете достичь этого без Javascript. я использовал .parent:hover .child { -webkit-animation-play-state: paused; } и он работал отлично.

...