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

helicopter IT

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

Advertisements

:hoverの使い方

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

マウスカーソルが乗った時だけ変更
セレクタ:hover{};

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

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

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

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

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

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

コメント