タッチデバイスで :hover スタイルを効果的に無効にする方法: 包括的なガイド

タッチ デバイスで :hover スタイルを無効にする方法: 総合ガイド

問題:
タッチ デバイスが Web サイトにアクセスすると、次が発生します。 hover CSS スタイルは、クリックまたはタップでトリガーされます。これにより、気が散ったり、インタラクティブな要素にアクセスできなくなったりする可能性があります。

目的:
各宣言のセレクターを知らずに、タッチ デバイスの :hover CSS 宣言をすべて削除または無視します。

解決策:

JavaScript の削除

JavaScript を使用して :hover を含むすべての CSS ルールを削除します。

<code class="javascript">if (hasTouch()) {
  for (var si in document.styleSheets) {
    for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
      if (styleSheet.rules[ri].selectorText.match(':hover')) {
        styleSheet.deleteRule(ri);
      }
    }
  }
}</code>

長所:

• 古いブラウザと互換性があり、CSS の変更は必要ありません。
  短所:
• マウスとタッチ デバイスが混在している場合、ホバーが無効になり、UX が損なわれます。
• 同じドメインでホストされているスタイルシートのみを削除できます。

メディア クエリでは CSS のみ

:hover ルールを含めるには @media ブロックを使用します。

<code class="css">@media (hover: hover) {
  a:hover { color: blue; }
}</code>

長所:

• CSS での実装が簡単。
  短所:
• ホバー メディアのサポートが必要クエリ (iOS 9.0、Chrome for Android、Android 5.0)。
• マウスとタッチ デバイスが混在している場合は一貫性がありません。

タッチ検出と CSS インジェクション

タッチ イベントを検出JavaScript を使用し、条件付きで CSS クラスを追加します。

<code class="js">if (!hasTouch()) document.body.className += ' hasHover'</code>

<code class="css">body.hasHover a:hover { color: blue; }</code>

長所:

• 混合タッチ デバイスのメディア クエリよりも信頼性が高くなります。
  短所:
• 依然としてタッチ エミュレーション イベント (タッチスクリーン上のマウス カーソルなど) の影響を受けます。

究極の解決策: 動的ホバー検出

マウス カーソルとタッチ イベントに基づいてホバー スタイルを有効または無効にします。

<code class="js">function watchForHover() {
  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)
}</code>

長所:

• 最も堅牢なソリューションで、すべてのブラウザで動作します。
• ホバー スタイルをデバイス入力に動的に適応させます。
  短所:
• エミュレートされたマウス移動イベントを防ぐため、タッチ イベント後に短い遅延 (例: 500 ミリ秒) があります。

以上がタッチデバイスで :hover スタイルを効果的に無効にする方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。