よくメニューとかグローバルナビで使われているやつで、マウスホバーすると、それにあわせて付いてくる線(バー)をCSSだけで実装する方法。 JavaScriptでやることが多いと思いますけど、CSSだけでできるんじゃないかと思ってやってみた結果です。CSSの間接セレクタを利用することで、大変簡単にできました。 追従してくるバーのデモ マウスをのせると黒いバーがアニメーションしながらついてきます。古いIEには対応していませんので、Chrome等のモダンブラウザでご覧ください。 マウスが離れると定位置へ戻るという、まぁ、よく見るやつですね。以下でやり方を説明しています。HTMLとCSSだけです。 実装方法 HTML <nav class="global-nav"> <p><a href="#">Menu name</a></p> <p><a href="#">Menu name</a></p> <
![マウスホバーでアニメーションしながら追従するバーをCSSだけで実装する | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2cd4fba97b6a6aa79bc3a2aa7a8107beb1173f1/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F02%2Fcatch-moving-menu-bar-with-mouse-hover.jpg)