タッチスクリーン デバイスでの不要な :hover 効果を防ぐにはどうすればよいですか?

タッチスクリーン デバイスの :hover の癖を克服する

問題: :hover CSS スタイルがタッチ デバイス上で意図せずトリガーされ、望ましくない効果が発生します。

解決策: タッチスクリーン プラットフォームで :hover 宣言を無効にするか無視するための包括的な戦略を実装します。

Quick and Dirty: JavaScript Removal

実用的なアプローチの場合は、 JavaScript を利用して、すべての :hover スタイルを削除できます。スタイルシートは同じドメインでホストする必要があり、タッチ/マウスが混在するデバイスでの UX を妨げる可能性があることに注意してください。

<code class="js">function hasTouch() {
  // Check for touch capabilities
}

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>

CSS ベースのソリューション

メディア クエリ:

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

ただし、このソリューションは iOS 9.0 または Android 5.0 デバイスでのみ機能します。

条件ルール:

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

これには先頭に追加する必要がありますタッチスクリーン検出に基づいて追加または削除されるクラス (hasHover など) を含むすべての :hover ルール。

最適な検出: JavaScript と CSS

最も堅牢なソリューションは、JavaScript タッチ検出と CSS を組み合わせたものです。条件付きルール。

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>

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

このメソッドは、マウスが検出されたときにホバー効果を有効にし、タッチされたときに無効にします。

実装に関する推奨事項

最新のブラウザの場合、クラスを使用した JavaScript と CSS 条件付きルールの組み合わせが推奨されます。レガシー ブラウザの場合、JavaScript ベースの :hover スタイルの削除が実行可能なオプションです。

追加リソース:

• [GitHub Example](https:// jsfiddle.net/57tmy8j3/)

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