title: Triggering :hover on moving element without moving mouse
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
    animation: scroll 2s linear infinite;
    width: 100px;
    height: 100px;
    background: red;
  }
  
  #box:hover {
    background: green;
  }
  
  @keyframes scroll {
    from {transform: none;}
    to {transform: translateX(400px);}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you hover over the box, it stays green if you don't move the mouse after. If you put your mouse in its path and don't move, it doesn't trigger the hover.</p>
  
  <p>Is there a way of triggering hover without moving the mouse in this case?</p>
  
  <p>Edit: Without using JavaScript.</p>