我目前有一些 CSS3 动画在页面加载时无限循环播放。
有没有办法手动触发这些 - 例如,如果我将鼠标悬停在另一个 DOM 元素上,而不需要 Javascript/Jquery?
即 -> 将鼠标悬停在元素 a 上 -> 在 DOM 元素 x、y、z 上启动动画
提前致谢
最佳答案
您可以在 CSS 中将其设置为 class
,然后使用 javascript 触发添加/删除。
$('#element1').hover(function(){
$('#element2').addClass('animate');
}, function(){
$('#element2').removeClass('animate');
});
为了连接到事件中,您将需要 Javascript。
使用纯 CSS 的另一种方法是使用伪类 :hover
,但前提是 #element2
是 #element1< 的子类
.
#element1:hover #element2{
/* Your animation */
}
关于javascript - CSS3 动画触发其他 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15536063/