未経験の頃に憧れていたマウスオーバーエフェクト。
CSSだけでカンタン実装できるので、今更ですが初心者向けに解説したいと思います。

CSS擬似クラスを使って実装

作りたいモノ

まず作りたいマウスオーバー効果はこんな感じのものです。

マウスを要素に重ねると、文字色と背景色が変わるシンプルなエフェクトです。
CSS3では擬似クラスというものを使用して、マウスオーバーエフェクトを実装します。

擬似クラス

CSSの疑似クラスはセレクタに追加するキーワードで、要素に対して特定の状態を指定する事ができます。
例えば :hover 疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用し、:first-childを追加すれば、最初の子要素のみスタイルを適用できます。

CSSの記述の仕方は、要素の後に :擬似クラス名 を追加するだけです。

:hover 擬似クラスを使用する

マウスオーバーエフェクトは :hover 擬似クラスを使用します。
背景色やフォントを設定したクラスとは別に、:hoverを追加したクラスを記述し、マウスを重ねた後のスタイルを定義します。
サンプルではマウスオーバーした時に、文字色、背景色、囲み罫線が変化するようにしました。

HTML

CSS

通常のスタイルに:hover擬似クラスを追加するだけで、マウスオーバーエフェクトが作れました。

マウスを重ねた時に「ふわっと」変化させるには、さらに記述が必要なので別記事で紹介していますので参考にしてください。

コピペで簡単！背景色や文字色をマウスオーバーでふわっと切り変える方法

2017年10月9日

まとめ

:hover擬似クラスは使いどころ満載で、文章を追加したりボタンを移動させたり、背景画像を差し替えたりと、多くのデザイン的処理を実現してくれます。
マウスオーバー時のエフェクトは、ユーザービリティの向上にも繋がるので色々な変化を試して、見やすいエフェクトを見つけてください。

CSSの擬似クラスで実装！マウスオーバー効果【初心者向け】でした。