カーソルが乗っている時にスタイルを変えたい場合は、疑似クラスを使用します。
サンプル
例)背景色が、カーソルオンで赤、マウスクリックで青となるスタイルを指定する
1 2 3 4 5 |
<style> p.samplehover:hover{background-color:red;} p.samplehover:active{background-color:blue;} </style> <p class="samplehover">ここにカーソルを当てると赤くなり、クリックすると青くなります。</p> |
【結果】
ここにカーソルを当てると赤くなり、クリックすると青くなります。
備考
- 疑似クラスはリンク(aタグ)でよく使われますが、リンク以外でも使用可能です。
- 疑似クラスは「link → visited → hover → active」の順に指定してください。
- 他の疑似クラスについては以下ページをご覧ください。
→ [CSS] 疑似クラス一覧
コメント