[CSS] カーソルが乗っている時にスタイルを変える

2019年7月26日

カーソルが乗っている時にスタイルを変えたい場合は、疑似クラスを使用します。

サンプル

例）背景色が、カーソルオンで赤、マウスクリックで青となるスタイルを指定する

<style>
  p.samplehover:hover{background-color:red;}
  p.samplehover:active{background-color:blue;}
</style>
<p class="samplehover">ここにカーソルを当てると赤くなり、クリックすると青くなります。</p>

<style>

p.samplehover:hover{background-color:red;}

p.samplehover:active{background-color:blue;}

</style>

<p class="samplehover">ここにカーソルを当てると赤くなり、クリックすると青くなります。</p>

【結果】

ここにカーソルを当てると赤くなり、クリックすると青くなります。

備考

疑似クラスはリンク（aタグ）でよく使われますが、リンク以外でも使用可能です。
疑似クラスは「link → visited → hover → active」の順に指定してください。
他の疑似クラスについては以下ページをご覧ください。
→ [CSS] 疑似クラス一覧

CSS

Posted by tora