CSS3动画触发其他DOM元素

Question

我目前有一些CSS3动画在页面加载时以无限循环播放。

有没有办法，手动触发这些 - 例如，如果我将鼠标悬停在另一个上 DOM元素，而不需要Javascript/Jquery？

即 - >将鼠标悬停元素的 - >启动动画的DOM元素X，Y，Z

提前感谢

Answer 1

你可以将其设置为你的CSS一class，然后用javascript触发添加/删除。

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

为了勾引事件，您将需要使用Javascript。

另一种使用纯CSS的方法是使用伪类:hover，但前提是#element2是#element1的孩子。

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

Answer 2

您需要设置DOM，以便x，y和z位于元素a的内部。那么你可以这样做：

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