CSSでマウスカーソルを当てている時だけ変化させる方法/:hover擬似クラスの使い方

CSSコーディングにより、マウスカーソルを当てている時だけ変化が起きるようにする方法です。

:hoverの使い方

使い方は簡単で、要素名の後ろに:hoverを付けて、あとは普通にCSSを書くだけです。

例えば、この文章にマウスカーソルを当ててみてください。

カーソルが乗った時だけ色が変更されるはずですが、これは以下のようなコードによるものです。

<！-- html -->
<p class = "hov">例えば、この文章にカーソルを当ててみてください。</p>

//CSS
.hov:hover{
  background-color:grey;
}

:hover擬似クラスについては以上です。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27