CSS :hover 疑似クラス — インタラクティブなマウスオーバースタイル
インタラクティブなマウスオーバー効果を作成するCSS :hover疑似クラスを学びます。アクセシビリティの考慮事項、トランジションの組み合わせ、タッチデバイスのフォールバックを紹介します。
Pseudo-classes
詳細な説明
CSS :hover 疑似クラス
:hover疑似クラスは、ユーザーがポインティングデバイス（通常はマウスカーソル）を要素の上に置いたときにスタイルを適用します。
構文
a:hover {
color: #0066cc;
text-decoration: underline;
}
トランジションとの組み合わせ
ホバー状態はCSSトランジションと組み合わせると最も効果的です：
.card {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
アクセシビリティの考慮事項
- タッチデバイス：
:hoverがモバイルで動作しないか「固着」する可能性がある @media (hover: hover)を使用してホバー専用スタイルを適用する- インタラクティブ要素には常に
:focusのスタイルも設定する - 重要な情報の表示にホバーに依存しない
ユースケース
:hover疑似クラスはインタラクティブなWebデザインの基本です。ボタン、リンク、カードでの視覚的フィードバック、ツールチップやドロップダウンメニューでの追加情報の表示、画像ギャラリーのズーム効果、CSSのみのドロップダウンナビゲーション、行ハイライトによるデータテーブルの強化に使用されます。