【CSS3 Transitions】マウスオーバーで文字色や背景色をふわっと切り替える記述方法

マウスオーバーでふわっと切り替えるjQueryはいろいろありますが、CSS3だけでも同じように文字色や背景色の切り替えが可能です。css3の「Transitions」を使うととっても簡単に実装できます。

マウスオーバーで’文字色’をふわっと切り替える

html

htmlは通常通りです。aタグにclassを記述します。もしaタグ全てに共通でcss指定する場合はもちろんclass名なしでもできます。

<a href="#" class="hoge">リンクテキスト</a>

css

通常の色指定に加えて、Transitions を指定します。

a.hoge {
    color: #333;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    }
a.hoge:hover {
    color: #999;
    }

切り替わる速度を調整するには、「0.3s」の部分の数字を変更します。
上記の「transition: all 0.3s ease;」の「all」はすべてのプロパティを対象に、「0.3s」は変化にかかる時間（0.3秒の意）、「ease」は変化の方法を指定しています。

マウスオーバーで’背景色’をふわっと切り替える

html

htmlは通常通り。デザインによって調整してください。

<a href="#" class="hoge">リンクテキスト</a>

css

背景色の場合も通常の色指定に加えて、Transitions を指定します。

a.hoge {
    background-color: #333;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    }
a.hoge:hover {
    background-color: #999;
    }

上記は背景色「background-color」の指定ですが、背景画像の指定なども同様の記述方法でできます。