CSS ポインタが乗ったら変化をつける :hover擬似クラス

こんにちは。レモンティーです。

今回は、ポインタ(カーソル)が乗った時だけデザインに変化をつける方法です。
使うのは:hover擬似クラスです。

xxx:hover{~}

と書くと、xxxにポインタが乗っている間だけ反映されるデザインを設定できます。

例えば

こういうやつのことですね。ポインタを乗せてみてください。

これは以下のようになっています
HTML

<p class="example">こういうやつのことですね。ポインタを乗せてみてください。</p>

CSS

.example{border:solid 2px black; padding:5px;}
.example:hover{background:gray;}


今回はこれでおしまいです。
sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com