: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

関連