css3 webkit animation stop sur les div:hover

J'ai essayer de faire une animation avec webkit-animation et @-webkit-keyframes. J'ai un div d'animation avec des enfants div à l'intérieur.

Et je voudrais arrêter le webkit-animation de la mère quand ma souris est sur un enfant.

Des Exemples ?

Grâce

OriginalL'auteur Geraud Mathe | 2011-07-02

  1. 22

    Malheureusement, il n'existe pas de parent sélecteur CSS, voir ici. Vous devrez utiliser un peu de javascript pour sélectionner la mère et de dire à la pause.

    La pause déclaration dans le CSS qui va comme ceci:

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

    Le javascript (jQuery, dans ce cas) devrait ressembler à quelque chose comme ceci:

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

    Voir une démo en live ici:

    http://jsfiddle.net/UFepV/

    Je sais que cette question et la réponse sont un peu vieux, mais juste au cas où mon raisonnement est faux: ne pourriez-vous pas faire, dans le CSS, .child:hover{ -webkit-animation-play-state: paused; }? Cela fonctionne sans avoir à recourir à du Javascript?
    Non, parce que vous dites à l'enfant d'arrêter, tandis que ce qui est en cours d'animation est le parent. L'enfant dans son essence n'a même pas de "savoir" c'est en cours d'animation.
    Vous savez, j'ai totalement raté le .parent() appel en vol stationnaire de la fonction. Un jour peut-être l'ancêtre des sélecteurs seront disponibles, mais jusqu'alors, j'imagine que c'est le seul moyen.

    OriginalL'auteur methodofaction

  2. 8

    Si vous utilisez de plus en plus complexe de l'étiquette, vous pouvez l'obtenir sans Javascript. J'ai utilisé
    .parent:hover .child { -webkit-animation-play-state: paused; } et il a parfaitement fonctionné.

    OriginalL'auteur Quintin Wright