マウスに追従するホバーアニメーション

cssのみで「マウスに追従するホバーアニメーション」を作るには少し工夫が必要です。追従して動く要素が並列になっている要素(今回でいうli要素)からみて、下の兄弟要素か子孫要素でなければ動かす事が出来ない為、追従する要素をli要素にする必要があります。

<nav class="g-nav">
  <ul>
    <li><a href="">Button1</a></li>
    <li><a href="">Button2</a></li>
    <li><a href="">Button3</a></li>
    <li><a href="">Button4</a></li>
   <li class="slide"></li>
 </ul>
</nav>