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

Question

正在闲逛 css3 动画
检查一下http://codepen.io/rokki_balboa/pen/eNVEyq

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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
    * {
            margin: 0;
            padding: 0;
    }

html {
        overflow: hidden;
}

body {
        height: 100vh;
        width: 100vw;
        background-color: #000;
        position: relative;
}

section {
        width: 100%;
        height: 100%;
        position: relative;
        perspective: 500px;
}

section:hover {
        transform-style: preserve-3d;
        animation: cool 5s ease-in-out forwards;
}

@keyframes cool {
        0% {
                transform: perspective(1000px) translateZ(0px);
        }
        45% {
                transform: perspective(1000px) translateZ(-400px);
        }
        55% {
                transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
        }
        100% {
                transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
        }
}

div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
}

div:nth-child(1) {
        background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
        background-size: cover;
}

div:nth-child(2) {
        background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
        background-size: cover;
        transform: rotateY(.5turn);
        backface-visibility: hidden;
}

#trigger {
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: #fff;
        font-size: 14px;
}

.ghoster {
        display: none;
}

如您所见，它在悬停部分时有效。但我的目标是在您单击 anchor 时触发悬停在部分上。

<强>1。你点击更改 anchor
<强>2。动画出现在部分元素上
3.再次点击
4.动画又来了

我不知道如何实现这样的结果。
你能帮帮我吗？
附:如果您在纯 javascript 上执行它会更好。

Answer 1

CSS

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

HTML

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

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>