タッチデバイス上のボタンのスティッキーホバー効果を防ぐにはどうすればよいですか?

タッチ デバイスでは、CSS を使用してホバー効果を追加すると、要素が固定されます。この記事はあなたに教えます この問題を解決する方法を教えてください。 タッチ デバイスではホバー効果がないため、ボタンは元の状態のままになります。いいえ JavaScript の使用: CSS のメディア クエリ機能を使用すると、この問題を解決できます。サポートされているデバイス hover は、「hover: hover」という要件に一致するものです。次の CSS が追加されていることを確認するには これらのデバイスでのみ、この条件でメディア クエリを使用してください。ホバーをサポートするデバイスのみが タッチデバイスではホバー効果は表示されません。これにカーソルを合わせると、ホバー効果が追加されていることがわかります ボタンを押すと背景色が変わります。ここでは、JavaScript を使用して HTML から値を取得します。

• ご存知のとおり、タッチ スクリーン テクノロジは :hover 動作をサポートしていません。したがって、 レスポンシブ Web サイトを作成するときは、いつ、どこで使用するかを慎重に検討する必要があります。 :ホバーインタラクション。一部のタッチ スクリーン デバイスでは、単純なリンクのホバー効果が失われます。 URL を開きます。ページが変更される前の短時間、:hover スタイルが表示されます。 iOS では、:hover がクリック イベントの前にアクティブ化されるため、

• これらは軽微な問題であり、サイトの機能には影響しません。ここに、:hover があります。 表示または可視性 CSS プロパティを使用して、別の要素を表示または非表示にします。はい 本当の問題。

この問題を解決するには 2 つの方法があります。

JavaScript のないデバイス - CSS メディア クエリ関数を使用して修正できます。この機能をサポートするデバイス hover は「hover: hover」という条件で参照されます。そのようなデバイスにのみ次の CSS を追加します。 この条件とともにメディア クエリを使用することは保証されています。

コードセグメント

リーリー

例 1

の中国語訳は次のとおりです:

例 1

これは、ホバーをサポートするデバイスにホバー効果を追加するだけであり、タッチ デバイスにはホバー効果はありません。存在する この場合、ボタンの上にマウスを置くと、ボタンの背景色が変わります。タッチデバイスには、 ホバー効果はないため、ボタンは元の状態のままです。

リーリー

上記のコードは次の出力を生成します: これは非タッチ スクリーンでの結果です。

JavaScript を使用した 2 番目のステップ - このメソッドでは、次の JavaScript 関数を使用してチェックします。 タッチデバイスを使用するかどうか。ユーザーが要素に触れるたびに、 ontouchstart イベントの応答は true 値を返します。最大連続タッチ点数 デバイスがサポートする値は、navigator.maxTouchPoints.

によって返されます。 このデバイスでサポートされている機能は、navigator.maxTouchPoints によって返されます。

navigator.msMaxTouchPoints では、ベンダー プレフィックス「ms」で同じ機能が利用可能です。 IE 10 以前のブラウザを対象としています。したがって、デバイスがタッチ機能をサポートしている場合、指定された 関数は true を返します。

コードセグメント

リーリー

例 2

は次のように翻訳されます:

例 2

この例では、タッチ機能が有効になっていない場合にボタンにクラスを追加する方法を見てみましょう。次のように：＃＃＃ 以下のコードでは、このクラスは CSS でボタンのホバー効果を提供します -

リーリー

上記のコードは次の出力を生成します。これは非タッチ デバイスでの結果です。

タッチ デバイスにはホバー効果がないため、ボタンは元の状態のままです。

以上がタッチデバイス上のボタンのスティッキーホバー効果を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。