如何使用JavaScript触发CSS动画？

我试图只在鼠标悬停在某个元素上时运行CSS动画。基本上，如果鼠标悬停在父元素容器上，我希望子元素灯光仅在其悬停时运行其动画。我希望通过JavaScript/jQuery实现这一点，因为我不确定仅使用CSS是否就可以实现这一点。我也是JavaScript新手

.light{
位置：绝对位置；
转换：翻译（-200%，20%）；
宽度：4px；
高度：4px；
边界半径：5px；
背景：#0f0；
过滤器：色调旋转（80度）；
z指数：2；
动画：光1s线性无限；
}
@关键帧灯光{
*一些动画*
}

---

使用

：悬停

.light{
宽度：40px；
高度：40px；
边界半径：5px；
背景：绿色；
}
.集装箱{
边框：1px点红色；
}
.container:hover>.light{
动画：光1s线性无限；
}
@关键帧灯光{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

---

如果您希望使用JavaScript执行此操作，您可以在

鼠标上方添加
悬停
类，并将关键帧动画添加到
.light中。在css中悬停
，如下所示：


var target=document.querySelector（“.light”）；
target.addEventListener（“mouseover”，mouseover，false）；
target.addEventListener（“mouseout”，mouseout，false）；
函数mouseOver（）{
target.classList.add（“悬停”）
}
函数mouseOut（）{
target.classList.remove（“悬停”）
}
.light{
宽度：100px；
高度：100px；
边界半径：5px；
背景：#0f0；
}
.轻，悬停{
动画：光3s线性无限；
}
@关键帧灯光{
从{
过滤器：色调旋转（0）；
}
到{
过滤器：色调旋转（180度）；
}
}
这不是默认使用脚本的好理由。你完全可以用CSS在祖先悬停上应用动画。对不起。我只是不确定CSS是否会起作用，而且Javascript似乎会更有效。我也很乐意接受CSS解决方案，如果它更有效的话。你有一个在下面，多个在上面。如果你真的想用JS来做这件事，之前也已经讨论过了。非常感谢！这很有效