:active【アクティブ要素】疑似クラス
:focus【フォーカス要素】疑似クラス
:hover【ホバー要素】疑似クラス

メモ 外部リンク 構文 例

メモ

構文

構文説明
E:active  { スタイル定義 } アクティブなE要素に適用 (マウスボタンを押下して離すまでの間 等)
E:focus  { スタイル定義 } フォーカスがあるE要素に適用
E:hover  { スタイル定義 } マウスカーソルが乗っている(ホバー)E要素に適用

例

<style>
.ex-hover:hover   { background-color: blue; }
.ex-active:active { background-color: yellow; }
.ex-focus:focus   { background-color: pink; }
.a-hover:hover    { background-color: blue; color: white; }
.a-active:active  { background-color: yellow; color: blue; }
.a-focus:focus    { background-color: pink; color: black; }
</style>

<input type="text" class="ex-active"> :active<br>
<input type="text" class="ex-focus"> :focus<br>
<input type="text" class="ex-hover"> :hover<br>
<input type="text" class="ex-active ex-focus"> :active＋:focus<br>
<input type="text" class="ex-active ex-hover"> :active＋:hover<br>
<input type="text" class="ex-focus ex-hover"> :focus＋:hove<br>
<input type="text" class="ex-active ex-focus ex-hover"> :active＋:focus＋:hove<br>

<a class="a-active" href="#">:active</a><br>
<a class="a-focus" href="#">:focus</a><br>
<a class="a-hover" href="#">:hover</a><br>
<a class="a-active a-focus" href="#">:active＋:focus</a><br>
<a class="a-active a-hover" href="#">:active＋:hover</a><br>
<a class="a-focus a-hover" href="#">:focus＋:hove</a><br>
<a class="a-active a-focus a-hover" href="#">:active＋:focus＋:hove</a><br>

:active
:focus
:hover
:active＋:focus
:active＋:hover
:focus＋:hove
:active＋:focus＋:hove
:active
:focus
:hover
:active＋:focus
:active＋:hover
:focus＋:hove
:active＋:focus＋:hove