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

Question

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

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

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