CSS3动画触发其他dom元素

Question

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

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

即 - ＆gt;将鼠标悬停在元素a上 - ＆gt;在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;
}