タッチデバイスで :hover CSS スタイルを効果的に無効にするにはどうすればよいですか?

タッチ デバイスの :hover CSS スタイルを無視する

Web サイトを開発する場合、タッチ デバイスの :hover CSS 宣言を削除または無視することが望ましいです。

手っ取り早い: JavaScript の使用

1 つの方法は、JavaScript を使用して :hover を含むすべてのスタイル ルールを削除することです。この方法は古いブラウザと互換性があり、CSS を変更する必要はありません。

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (hasTouch()) {
  // Loop through stylesheets and remove :hover rules.
  ...
}</code>

制限事項:

• スタイルシートは同じドメインでホストする必要があります。
• マウスとタッチ デバイスが混在している場合でも、:hover イベントがトリガーされ、ユーザー エクスペリエンスに悪影響を及ぼす可能性があります。

CSS のみ: メディア クエリ

または、メディア クエリを使用して、特定のデバイスの :hover スタイルを無効にすることもできます。

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

制限事項:

• メディア クエリが必要ですが、メディア クエリは必要ありません。すべてのブラウザでサポートされています。
• マウスとタッチ デバイスが混在するデバイスでは動作しません。

最も堅牢な JavaScript 検出

最も信頼性の高い解決策は、JavaScript を使用してタッチ イベントを検出し、カスタム クラスで :hover ルールを追加します。

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

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (!hasTouch()) {
  document.body.className += ' hasHover';
}</code>

この方法は CSS のみのアプローチの制限を克服しますが、マウスとマウスの混合では依然として問題が発生する可能性があります。

これに対処するには、マウス カーソルの動きに基づいてホバー効果を有効にし、タッチ イベントでホバー効果を無効にする、より高度なアプローチを実装します。

<code class="javascript">function watchForHover() {
  // Initialize variables for touch detection.
  ...

  // Add or remove the "hasHover" class depending on user actions.
  ...
}

watchForHover();</code>

このソリューションは、信頼性の高い検出と処理を提供します。ユーザー エクスペリエンスを損なうことなく、すべてのデバイスでホバー スタイルを実現します。

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