CSS3 애니메이션이 다른 DOM 요소를 트리거합니다.

Question

현재 페이지로드시 무한 루프로 재생되는 CSS3 애니메이션이 있습니다.

수동으로 트리거하는 방법이 있습니까? 예를 들어, DOM 요소를 마우스로 가리키면 Javascript/Jquery가 필요하지 않나요?

즉 -> 요소 이상 호버은 -> Z 사전에

많은 감사를, DOM 요소의 X, Y에 애니메이션을 시작

는

Answer 1

당신은 자바 스크립트를 사용하여 다음 CSS에서 class로 설정하고 수 추가/제거를 트리거합니다.

$('#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; 
}