マウスに追従するホバーアニメーション
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>
この記事が気に入ったらサポートをしてみませんか?