2 flat logo on transparent 256
2018-04-05

CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き

Css2312312

jQueryでは指定要素にマウスをhoverした際に動作を変更することができます。

実はCSS3でもhoverした際に背景色を変更したり、動作を変更したりする事ができるので、今回はCSS3とtransitionsを利用して解説していきます

なおブラウザによって対応できるバージョンが違いますので、 利用を検討する際はこちらを御覧ください

hoverとは

指定要素にマウスが乗った場合の動作を指します。 あくまでマウスが乗った状態なので、クリックした際の挙動ではありません。

CSSでhover動作を制御する

CSSのクラスの後ろに:hoverを設定すれば、hoverした時の動作を追加する事ができます。

#リンクをhoverしたら背景色を変更
a:hover { 
    background-color: blue;
}

## 全サンプルコード 下記サンプルをコピーして.htmlの拡張子で保存すれば確認する事ができます。

ふわっと色を変更するhoverすると色を変換するテスト のテキストをhoverすれば、徐々に背景が変化していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hoverカラー変換テスト</title>
    <style>

        .back-color1 {
            color: black;
        }

        .back-color1:hover{
            background-color: lightskyblue;
            color: white;
        }

        .back-color2 {
            margin-top: 50px;
            background-color: black;
            color: white;
            -webkit-transition: 2s;
            -moz-transition: 2s;
            -o-transition: 2s;
            -ms-transition: 2s;
            transition: 2s;
        }

        .back-color2:hover{
            background-color: lightskyblue;
            color:black;
        }

    </style>
</head>

<body>

    <div class="back-color1">
        hoverすると色を変換するテスト
    </div>


    <div class="back-color2">
        ふわっと色を変更するhoverすると色を変換するテスト
    </div>

</body>
</html>

:transitionを解説

.back-color2クラスのtransitionで変化が完了するまでの時間を設定しています。

今回は2秒で設定していますが、0.1秒や1秒以下の数値でも設定可能です。

.back-color2:hover でhoverした時の背景色をlightskyblueへ 文字の色を黒色へ変更しています。

        .back-color2 {
            margin-top: 50px;
            background-color: black;
            color: white;
            -webkit-transition: 2s;
            -moz-transition: 2s;
            -o-transition: 2s;
            -ms-transition: 2s;
            transition: 2s;
        }

        .back-color2:hover{
            background-color: lightskyblue;
            color:black;
        }

以上になります。

その他フロントエンドを動的に変化させたい場合は下記記事から

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

jQueryでひらがなをカナに自動変換し、バリデーションを設定する|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

前の記事
次の記事