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

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

作りたいモノ

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

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

擬似クラス

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

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

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

マウスオーバーエフェクトは :hover 擬似クラスを使用します。

HTML

CSS

CSSはマウスを重ねていない状態のスタイルと、マウスオーバーさせた状態のスタイルの両方を設定します。

通常のスタイルに :hover擬似クラスでコードを数行追加するだけで、マウスオーバーエフェクトが作れました。いやぁ〜便利ですね！

まとめ

:hover擬似クラスは使いどころが満載で、文章を追加したりボタンを移動させたり、背景画像を差し替えたりと、かなり多くのデザイン的処理を実現してくれます。

ただ、WEBデザイン初心者の頃は、カンタンに実装できる事が嬉しくて何でも動かしたり色を変えてしまい、逆に視認性を落とす危険性もあります。カンタンで便利ではありますが、あくまでユーザーの操作に支障のない程度で実装してください。

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