:hover
:hover CSS 疑似クラスは、ユーザーのポインタが要素上に置かれたとき（押されていないとき）に、その要素に特別なスタイルを適用します。
1. 構文
:hover 疑似クラスは、他のセレクタの直後に :hover を付けることで使用します。例えば、
selector:hover {
/* スタイルルール */
}
この疑似クラスは、あらゆる種類のセレクタと共に使用することができます。
2. 使用方法
:hoverは、リンクだけでなく、すべての可視化された要素に適用できます。:hoverの効果は、マウスポインタが要素上に入った瞬間に有効になり、要素から離れた瞬間に無効になります。- すべてのユーザーがコンテンツにアクセスできるように、
:hover状態でのみ重要な情報を表示することは避けるべきです。
3. 例
3.1. 基本的なリンクのスタイル
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
この例では、リンクはデフォルトで青色で下線が引かれていませんが、マウスオーバーすると赤色になり下線が引かれます。
3.2. ボタンのホバー効果
button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
この例では、ボタンはデフォルトで緑色の背景色を持ちますが、マウスオーバーすると濃い緑色になり、影が追加されます。
4. アクセシビリティに関する注意点
- ホバー時にのみ重要なコンテンツを表示するインターフェースを作成することは避けてください。キーボードナビゲーションや支援技術を使用しているユーザーにとっては、情報へのアクセスが困難になる可能性があります。
:hover状態のみに依存するのではなく、同じ情報にアクセスするための複数の方法を提供することをお勧めします。
5. ブラウザの互換性
:hover 疑似クラスは、すべての主要なブラウザでサポートされています。
| ブラウザ | バージョン |
|---|---|
| Chrome | すべて |
| Firefox | すべて |
| Safari | すべて |
| Edge | すべて |
| Opera | すべて |
関連情報
Q&A
Q1: :hover を使ってドロップダウンメニューを作成できますか？
A1: はい、:hover を使用してドロップダウンメニューを作成できます。サブメニューをデフォルトで非表示にし、親メニュー項目に :hover を使用してサブメニューを表示します。
Q2: :hover はタッチデバイスで動作しますか？
A2: タッチデバイスでは、:hover の動作は一貫性がありません。一部のデバイスでは、タッチイベントとマウスイベントが類似しているため動作しますが、他のデバイスでは動作しない場合があります。タッチデバイス向けの代替手段としては、:focus 疑似クラスの使用や、JavaScriptによるタッチイベントの処理などが考えられます。
Q3: :hover の効果を遅延させるにはどうすればよいですか？
A3: :hover の効果を遅延させるには、CSSの transition-delay プロパティを使用します。たとえば、transition-delay: 0.5s; とすると、ホバー効果が0.5秒遅延されます。