zukucode
主にWEB関連の情報を技術メモとして発信しています。
CSS

CSS マウスオーバーしたときのみスタイルを適用する

ある要素の上にマウスが置かれたとき（マウスオーバー）に指定したスタイルを適用する方法を紹介します。

例えば以下のようにリンクボタンにマウスオーバーしたときに色を変更したいときなどに使用します。

擬似クラス

マウスオーバーしたときのみ適用したいスタイルは擬似クラスで定義します。

<style>
    .link {
        color: blue;
    }
    .link:hover { /*擬似クラス*/
        color: red;
    }
</style>
<a class="link">ここにマウスオーバーしてみてください</a>

これを利用して、以下のようなボタンを作成することも可能です。

フワッとしたようなアニメーションが確認できると思います。

これはtransitionというスタイルを使用しています。transitionについてはCSS transitionでスタイルの変化をアニメーションするで紹介しています。

CSS

関連記事