タッチスクリーン デバイス上の hover CSS スタイルを無視する方法

課題: タッチ デバイス上のホバー表示の問題を克服する

:hover CSS プロパティは、マウスをホバーしたときに要素にインタラクティブなスタイルを追加します。ただし、ホバリングの概念がないタッチベースのデバイスでは、これによって問題が発生します。これにより、ユーザーがタッチスクリーン上の要素を操作するときに、予期しない動作や視覚的な乱れが発生する可能性があります。

解決策:

1. :hover スタイルの JavaScript の削除

JavaScript を使用すると、:hover を含むすべての CSS ルールを削除し、タッチ デバイスでこのプロパティを効果的に無効にすることができます。ただし、この方法には欠点があります。

• CSS の変更が必要で、古いブラウザでは互換性の問題があります。
• 混合入力デバイス (Surface、iPad Pro など) でホバー効果が無効になり、UX が損なわれます。 .

2. CSS のみのメディア クエリ

@media ブロック内で :hover ルールを囲むと、タッチ デバイスでのホバー効果を無効にすることができます。ただし、このアプローチ:

• iOS 9.0 と Android 上の最新のブラウザに限定されます。
• 古いブラウザではホバー効果が壊れるか、すべてのホバー ルールをオーバーライドする必要があり、柔軟性に影響します。

3. JavaScript 検出と CSS Prepending

JavaScript を介してタッチ入力を検出することにより、特別なクラス (例: hasHover) をドキュメント本文に追加できます。すべての :hover ルールの先頭にこのクラスを追加して、タッチ デバイスでのホバー効果を無効にすることができます。この方法はうまく機能しますが、混合入力デバイスではまだ課題に直面しています。

4.動的なホバー検出とクラスの切り替え

このメソッドは、JavaScript イベント処理とクラス操作を組み合わせて、ホバー効果を動的に切り替えます。マウス カーソルが検出されるとホバー効果が有効になり、タッチ イベントが発生すると無効になります。このアプローチは、幅広いブラウザーや入力デバイスで動作する最も堅牢なソリューションを提供します。