ホバー可能なデバイスの検出
hoverメディア機能を使用してCSSホバー効果を条件付きで適用。タッチスクリーンでのスティッキーホバー状態を防止。
Device Capabilities
詳細な説明
@media (hover: hover)で条件付きホバー効果
モバイルで最も一般的なCSSの不満の一つは「スティッキーホバー」問題です。
クエリ
@media (hover: hover) {
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
}
スティッキーホバー問題
タッチデバイスで要素をタップすると、:hoverがトリガーされ、他の場所をタップするまで残ります。ホバースタイルを@media (hover: hover)で囲むことで、ホバーが自然なインタラクションであるデバイスでのみ適用されます。
any-hover vs hover
hover: hover-- 主要な入力デバイスをチェックany-hover: hover-- いずれかの入力デバイスがホバーをサポートしている場合にtrue
ユースケース
タッチデバイスでのスティッキーホバー状態を防止し、マウスやトラックパッドのようなホバー可能な入力デバイスを実際に持っている場合のみホバー効果を表示するためにこのクエリを使用してください。