CSSかTailwind CSSでhoverを「PCにだけ」適用したい

March 31, 2024

by Shigeru Hyodo, Developer at RevisNote

「画面幅のメディアクエリを使わずに」PCかどうかを判定して、その上でhover擬似クラスを適用したい

CSSのhover擬似クラスで何かスタイルを適用したいとき、スマホだとクリックした後にもhoverの状態が残っていて、困ったことはありませんか？　簡単に対応するなら画面幅のメディアクエリでPCかスマホ・タブレットかを判定するのがよくある方法だと思うのですが、今回はより厳密に「スマホやタブレットのようなタッチデバイスではないデバイス」かどうかを判定した上で、そのデバイスに対してのみhover擬似クラスを割り当てる方法を紹介します。

まず結論

私は普段Tailwind CSSを好んで使うので、通常のCSSとTailwind CSSを用いた方法の２つを紹介します。

CSSで、hover擬似クラスをPCにだけ適用する

@media (hover: hover) and (pointer: fine) {
  .hover\:bg-blue-700:hover {
    background-color: #4b9cdb; /* 例としての色 */
  }
}

Tailwind CSSで、hover擬似クラスをPCにだけ適用する

Tailwind CSSの設定ファイルにカスタム擬似クラスhoverableを追加してやります。メディアクエリはCSSと同じ。

// tailwind.config.ts
export default {
  theme: {
    extend: {
      screens: {
        hoverable: { raw: '(hover: hover) and (pointer: fine)' },
      },
    },
  },
  plugins: [],
} satisfies Config

これで次のように書けば、PCのみにhover擬似クラスが適用されます。

<div class="hoverable:hover:text-indigo-500">Hover me</div>

解説

今回の肝は見ての通りメディアクエリです。CSSにせよTailwind CSSにせよ、このメディアクエリでなんとかしています。

(hover: hover) and (pointer: fine)

このメディアクエリの要素を一つずつ解説していきます。

(hover: hover)

「hover」 この機能は、ユーザーインターフェースがポインター（マウスやトラックパッドなど）によるホバーを検出できるかどうかを示します。
「: hover」 この値は、デバイスがホバーを検出できることを意味します。つまり、ユーザーがポインターを要素の上に置くだけで何らかのインタラクションが可能なデバイスです。これに対して、hover: noneはユーザーインターフェースがホバーを検出できないことを意味し、主にタッチスクリーンデバイスに該当します。

(pointer: fine)

「pointer」 この機能は、ユーザーが利用しているポインティングデバイスの精度を示します。
「fine」 この値は、デバイスが細かいポイント操作をサポートしていることを意味します。マウスやトラックパッドなど、ピクセル単位で正確なポインティングが可能なデバイスがこれに該当します。これに対して、pointer: coarseは指やスタイラスペンなど、比較的大まかな操作に適したポインティングデバイスを示し、タッチスクリーンデバイスに多く見られます。

and

「and」 このキーワードは、複数のメディア機能を組み合わせて一つの条件を形成します。この場合、デバイスがホバーを検出でき(hover: hover)、かつ細かいポイント操作が可能な(pointer: fine)場合にのみ、条件が真となります。つまり、このメディアクエリは、マウスやトラックパッドなどの細かい操作が可能なデバイスでホバーが検出できる場合に適用されます。

まとめ

(hover: hover) and (pointer: fine) というメディアクエリは、マウスやトラックパッドなどの細かい操作が可能なデバイスで、かつホバー操作が検出できるデバイスに特化したスタイルを適用する条件を定義しています。

この条件は主にデスクトップやノートパソコンなどでの使用を想定しており、タッチスクリーンデバイス（スマートフォンやタブレットなど）では適用されません。

これにより画面幅のメディアクエリを利用せずに、より厳密にPCかどうかを判定してhover擬似クラスを適用することができます。

おまけ: Tailwind CSS v4で正式登場予定のhoverOnlyWhenSupportedプロパティを使えば一発で片付けられる

現行のv3ではまだプレビュー機能としての提供ですが、hoverOnlyWhenSupportedプロパティを使えば、Tailwind CSSの通常のhover擬似クラスが、今回の記事で説明したようなメディアクエリによる「PCのみに適用」を自動で行ってくれます。

// tailwind.config.ts
export default {
  future: {
    hoverOnlyWhenSupported: true,
  },
} satisfies Config

これだけで、全てのhover擬似クラスがPCのみに適用されるようになります。何やらv4リリース時にはこれが常時有効になるようですが、今の段階ではfutureオプションで有効化する必要があります。

詳しくは下記のPull Requestをご覧ください。

https://github.com/tailwindlabs/tailwindcss/pull/8394