タッチ対応デバイス上の不要な :hover CSS を削除するにはどうすればよいですか?

タッチ対応デバイスでの :hover CSS の削除

ユーザーがタッチ デバイス経由で Web サイトにアクセスすると、:hover CSS 宣言が望ましくないものになる可能性があります。タッチ入力に効果的に反応しません。ユーザーは、ホバー効果が残り、混乱を招く可能性があります。この問題に対処するために、タッチ デバイスの :hover スタイルを削除または無視する方法がいくつかあります。

JavaScript の削除

1 つの方法では、JavaScript を使用してすべての CSS ルールを削除します。を含む:ホバー。この方法は古いブラウザと互換性があり、CSS を変更する必要はありません。デバイスがタッチ入力をサポートしているかどうかを確認し、スタイル ルールを反復処理することで、JavaScript はすべての :hover 宣言を削除できます。

CSS のみのメディア クエリ

別のオプションでは @ を利用します。デバイスがホバーをサポートしている場合にのみ、メディア クエリを使用して :hover ルールの適用を制限します。ただし、この方法は iOS 9.0 および Android の Chrome または WebView の Android 5.0 に限定されます。さらに、マウスとタッチ デバイスが混在している場合、ホバー エフェクトが壊れる可能性があります。

JS 検出と CSS の先頭への追加

堅牢な解決策には、JavaScript を使用してタッチ入力を検出し、すべてを先頭に追加することが含まれます。カスタム本文クラスを使用したホバー ルール (例: .hasHover)。このクラスを条件付きで適用すると、マウスをサポートするデバイスでのみホバー効果が有効になります。

マウス モーションとタッチ検出の組み合わせアプローチ

マウス モーションを組み合わせた最も包括的な方法検出とタッチ検出。ホバー効果は、マウスの動きが検出されると有効になり、タッチ入力が認識されると無効になります。このアプローチは、タッチ対応デバイスとマウス対応デバイスの両方でシームレスなエクスペリエンスを提供します。

実際的な実装

実際的な実装には、JavaScript イベント リスナーとボディ クラスの操作が含まれます。 hasHover クラスは、タッチ入力やマウス移動イベントに基づいて動的に追加または削除されます。

最新のブラウザの場合、ライブサンプルは https://jsfiddle.net/57tmy8j3/ にあります。古いブラウザと互換性のあるレガシー バージョンは、https://jsfiddle.net/dkz17jc5/19/ で入手できます。

以上がタッチ対応デバイス上の不要な :hover CSS を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。