マウスオーバー時に色を変える方法【CSSテクニック】

ハシビィくん

CSSでマウスオーバー時に色を変えるテクニックを知りたいっす！

カピーさん

テキストやボタンなど様々シチュエーションで使える基礎テクニックだから、しっかりマスターしていくぞ。

マウスオーバーとマウスホバーの違いについて

今回取り扱うマウスカーソルが特定の要素の上にある状態で「色が変わる」CSSを紹介する

マウスオーバー

マウスカーソルが特定の要素（ボタンやリンクなど）の上に置かれたときの状態を指します。このとき、通常は何らかのアクションがトリガーされることが多いです（例: 色が変わる、ツールチップが表示されるなど）。

マウスホバー

こちらも同様に、マウスカーソルが特定の要素の上にある状態を指しますが、「ホバー」という言葉は、少しより一般的なニュアンスで使われることがあります。ホバーは、マウスカーソルが要素上にあるときの持続的な状態を強調することが多いです。

現場での現状としては

正直「人による」というのが結論です。

エンジニア同士の会話であれば、前後の文脈で意味合いを察することができますし、クライアントに対してはもっと噛み砕いた説明をするのが実情です。

厳密の意味の違いを理解するようにも、自分の口で説明できるようにしておく必要があることはお忘れなく。

本記事の以下内容では、「マウスオーバー」で統一させていただきます。

マウスオーバー時に変化させる方法

マウスオーバーによる変化させる際の基本形は以下になります。

.sample{
基本のCSS
}
.sample:hover{
マウスオーバー時に追加、上書きしたいCSS
}

マウスオーバー時にテキストの色を変える

Webサイトでよく使われるaタグなどのリンクテキストの色を変更などに使うことができます。

.sample:hover{
    color: red;
}

<a href="#" class="sample">テキストの色が変わる</a>

基本形を見返すと、シンプルにcolorに変更させたいカラーコードなどを記述する形になります。

上記テキストリンクにマウスオーバーをすると、テキストカラーが赤色に変化するのが分かると思います。これで狙い通りマウスオーバーで色の変化を作ることができたわけです。

マウスオーバー時にボタンの背景色を変える

これまたWebサイトでよく見られるボタンの背景色を変える方法です。

テキストの色が変わる以上に、視覚的に変化が生まれやすいのでマスターしておくべきテクニックです。

.sample-button{
    border: 1px solid #333;
    color: red;
    padding:10px;
    background: #f2f2f2;
    display: inline-block;
    font-weight: bold;
    transition: .3s;
}
.sample-button:hover{
    background: yellow;
}

<a href="#" class="sample-button">ボタンデザインの背景色を変える</a>

仕組みとしてはボタンを用意し、色が変わる対象を背景色でコントロールしているという内訳になっています。

まとめ：マウスオーバー時に色を変える方法

マウスオーバー時に色を変える方法も、CSSで見せ方を変えることでガラッと印象を変えることができます。

マウスオーバーをスイッチに施せる見せ方は様々ありますので、今後も更新していこうと思います。

今回は特に「マウスオーバー時に色を変える」という基本的なテクニック紹介でした。