javascript - CSS3 アニメーションは他の dom 要素をトリガーします

Question

現在、ページの読み込み時に無限ループで再生される CSS3 アニメーションがいくつかあります。

これらを手動でトリガーする方法はありますか? たとえば、Javascript/Jquery を必要とせずに、別のDOM 要素にカーソルを合わせる場合は?

ie -> 要素 a にカーソルを合わせる -> DOM 要素 x、y、z のアニメーションを開始

よろしくお願いします

Answer 1

CSS でとして設定し、classjavascript を使用して追加/削除をトリガーすることができます。

$('#element1').hover(function(){
  $('#element2').addClass('animate');
}, function(){
  $('#element2').removeClass('animate');
});

イベントにフックするには、Javascript が必要です。

純粋な CSS を使用してそれを行う別の方法は、疑似クラス を使用することですが、が の子である:hover場合に限ります。#element2#element1

#element1:hover #element2{
  /* Your animation */
}

Answer 2

x、y、z が要素 a 内にあるように DOM を設定する必要があります。次に、次のことができます。

a:hover x,y,z {
    animation:yourAnimation 5s infinite;
}