Javascript 如何从触发器x触发y元素的css动画

我想动画我的身体背景，当我悬停在一个链接上，有人能帮我吗

我有一个改变背景颜色的动画“myfirst”

@keyframes myfirst
{
from{background: black;}
to{background: white;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from{ background: black;}
to{background: white;}

}

现在，我已经这样做，当我悬停身体的动画被触发

body:hover{
animation: myfirst 0.01s;
animation-iteration-count:500;
-webkit-animation: myfirst 0.01s;
-webkit-animation-iteration-count:500;
}

---

我想要一个链接触发改变我身体背景的动画。

正如其他人所说，为了在单击元素时改变

身体

，您需要有一个父选择器。因为CSS没有父选择器功能，所以您必须使用一点javascript

// Set onclick function for the element you want
document.getElementById('changeBG').onmouseover = function() { 
    document.body.style.animation = "myfirst 0.01s 500"; //Give the body the anim
    // The above could also be done by adding a class with the animation 
    // properties on click
};

但是，如果您只希望在链接悬停时背景闪烁，否则就停止，那么您可以使用另一个HTML元素（一种伪

主体

）在纯CSS中执行此操作。它要求伪body元素遵循文档流中的链接，如下所示

<a id='changeBG' href='#'>Change background</a>
<div id='cover'></div>

然后，您将使用同级选择器（我使用紧随其后的同级选择器

+

）和

：hover

为假身体提供动画

#changeBG:hover + #cover {
    -webkit-animation: myfirst 0.01s 500;
    animation: myfirst 0.01s 500;
}

---

你不能只使用CSS。。。你不能用css选择器引用家长，你可以在链接上添加一个点击监听器，然后在js中添加一个包含动画的类，恐怕其他人是对的。这是一个层叠样式表——它向下滚动，而不是向上滚动。我认为这是他们在这个演示中所做的：可以用js完成吗

#changeBG:hover + #cover {
    -webkit-animation: myfirst 0.01s 500;
    animation: myfirst 0.01s 500;
}