:active【アクティブ要素】疑似クラス
:focus【フォーカス要素】疑似クラス
:hover【ホバー要素】疑似クラス
メモ 外部リンク 構文 例
メモ
- フォーカス関連の疑似クラス (実装依存)
- :hover【ホバー要素】により動的なメニュー等の作成可
- 実装により順序あり
- :link【未訪問リンク要素】 → :visited【訪問済みリンク要素】 → :hover【ホバー要素】 → :active【アクティブ要素】
- 要素については、HTML5 リファレンス メモ 参照
外部リンク
構文
構文 | 説明 |
---|---|
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