css hoverとは？ hoverの使い方を徹底解説

こんにちは、今日はいつものおなじみCSSシリーズです。

CSSでhoverを使うことは多いと思います。ボタンに配置したり、ヘッダーやフッターのもじに付ける方も多いとおもます。そこでhoverの設定方法など細かく解説していきます。

そもそも、:hoverとは？

hoverとは擬似クラスと言われるものです。擬似クラスと言われるとよくわからない人も多いとおもますが、簡単にいうと何か特定のアクションを行われた際に適用されすCSSだと思ってもらえればOKです。

:hoverの場合はマウスのポインターが被さったときのことを差します。

.test:hover{
    color:#fff;
}

hoverはCSSの選択したクラス名の後に:hoverと付けます。この場合testというクラスに:hoverされた瞬間:hoverを付けたCSSが適用されます。この場合ですと、.testのカラーが白になります。正確には上書きされますので、:hoverされた時に:hoverで囲まれたCSSのプロパティが反映される形です。

<div class="test">赤になるよ</div>

応用編

こちらのボタンを:hovre瞬間に背景を変えるにはどうしたらしょうか？

ぜひ挑戦してみてください。