javascript - CSS3 动画触发其他 dom 元素

Question

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

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

ie -> 将鼠标悬停在元素 a 上 -> 在 DOM 元素 x,y,z 上开始动画

提前谢谢了

Answer 1

您可以在 CSS 中将其设置为 a 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;
}