any-hoverとhoverの違いを徹底解説！見分け方と使い分けのコツ

---

any-hoverとhoverの違いを理解する基礎知識

ウェブデザインでよく使われる CSS のメディアクエリには、入力デバイスの「ホバー」が関係する特徴がいくつかあります。その中でも特に重要なのが any-hover と hover の2つです。
まず前提として、hover は『主入力デバイスがホバー動作をサポートしているかどうか』を判定します。
たとえばデスクトップのマウスやトラックパッドのような「カーソルを動かして要素の上に置くとスタイルが変わる」ケースで有効になります。
一方、any-hover は「システムに存在するいずれかの入力方法がホバー可能かどうか」を判定するものです。
つまりスマホのようなタッチ入力が主入力の場合でも、同じ端末に他の入力機器（外部のマウスやスタイラス）が接続されていれば any-hover が true になることがあります。
この違いを正しく理解することは、デザインを壊さずに機能性を保つうえでとても大切です。
以下では、実務での使い分け方と具体的なコード例を詳しく説明します。

この違いがデザインに与える影響と使い分けのコツ

実務での大きな課題は、モバイル端末とデスクトップ端末で同じページを表示したとき、過剰なホバ―効果によって混乱を招かないようにすることです。
例えば、スマホでボタンにホバー用の矢印装飾が勝手につくと、指で押したときに動作と見た目が一致せず、ユーザー体験が悪化します。
そこで any-hover と hover の特性を組み合わせて使い分けると、適切に挙動を分岐させることができます。
具体的には、次のような実装が有効です。

• デスクトップ（マウス・トラックパッドが主入力）では :hover によるスタイルを有効にする
• モバイル（タッチが主入力）では :hover のスタイルを抑制するか別の UI に置換する
• 外部入力機器が接続されている場合だけホバ―効果を許容する柔軟性を作る

この方針を実現するには、以下のような CSS の書き方が役立ちます。
まずは、hover/any-hover の組み合わせを理解しておくと、閲覧環境によらず一貫した UI を提供できます。

able> 特徴 hover any-hover 実用例 判定の対象 主入力がホバー可能 システム内のいずれかがホバー可能 デスクトップのナビゲーション、外部デバイス付きのケース モバイル適用 基本的に false（主入力がタッチの場合は非対応） 多入力環境では true になり得るが慎重に扱う モバイルで hover 風の装飾を抑制するなど柔軟性が高い ble>

なお、実務では以下のように複数の条件を組み合わせて記述することが多いです。
@media (hover: hover) { /* 主入力が hover 可能な場合のスタイル */ }@media (any-hover: hover) { /* システムに hover 能力がある場合のスタイル */ }
このような条件を組み合わせると、デスクトップでもスマホでも自然な挙動を実現しやすくなります。
重要なのは「どのデバイスでどの挙動を見せるべきか」を最初に決めることです。
設計の初期段階で方針を決めておくと、後の修正が楽になります。

ピックアップ解説

any-hoverについて友達と話していたとき、彼はスマホだけの人だと思っていたけれど、実はPCやスタイラスを持つ人がいる環境ではany-hoverがtrueになることがある。つまり、デザインを作るときに、hoverを主役に置くか、any-hoverの存在を前提に柔軟性を持たせるかで大きく変わる。私は、CSS3以降のメディアクエリを併用して、hoverはデスクトップ向け、any-hoverは「複数入力がある環境」用の補助的なスタイルとして使うのが現実的だと考えている。設計時には、@media (hover: hover) と @media (any-hover: hover) の両方を意識することで、将来のデバイス変化にも対応しやすくなる。

---