構文 | 説明 |
---|---|
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