如何使用纯javascript在元素上触发悬停效果？

正在玩css3动画
检查一下

正如您所看到的，它在悬停部分时工作。但我的目标是，当你们点击一个锚时，触发在节上的悬停

1。您单击“更改锚定”
2。动画出现在节元素上
3.再次单击
4.动画再次出现

我不知道怎样才能达到这样的结果<你能帮帮我吗
p、 如果你在纯javascript上做它会更好。

CSS

<style>
section.activateHover
{
    transform-style: preserve-3d;
    animation: cool 5s ease-in-out forwards;
}
</style>

第1节激活覆盖
{
变换样式：保留-3d；
动画：酷炫的5s缓进缓出向前；
}

HTML

Javascript

<script type="text/javascript">
  var trigger = document.getElementById('trigger');
  var sectionToChange = document.getElementById('sectionToChange');
  trigger.onclick = function(e)
  {
       //toggle hover
       sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
       //restart animation
       if(sectionToChange.className != 'activateHover')
       {
         sectionToChange.className = 'activateHover';
       }
  }
</script>

var trigger=document.getElementById（'trigger'）；
var sectionToChange=document.getElementById（'sectionToChange'）；
trigger.onclick=函数（e）
{
//切换悬停
sectionToChange.className=（sectionToChange.className=='activateHover'）？'''activateHover'；
//重新启动动画
if（sectionToChange.className！=“activateHover”）
{
sectionToChange.className='activateHover'；
}
}

你是说纯CSS吗？

<style>
section.activateHover
{
    transform-style: preserve-3d;
    animation: cool 5s ease-in-out forwards;
}
</style>

<section id="sectionToChange">
    <div></div>
    <div></div>
</section>
<a href="#" id="trigger">Change</a>

<script type="text/javascript">
  var trigger = document.getElementById('trigger');
  var sectionToChange = document.getElementById('sectionToChange');
  trigger.onclick = function(e)
  {
       //toggle hover
       sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
       //restart animation
       if(sectionToChange.className != 'activateHover')
       {
         sectionToChange.className = 'activateHover';
       }
  }
</script>