スマホでホバーが効かないときの対処

タッチ端末にホバー状態は存在しない

マウス操作では、カーソルを要素の上に乗せている間が :hover の状態です。しかしタッチ操作には「乗せ続ける」がなく、指で触れた瞬間にタップ（クリック相当）になります。そのため hover を前提にした演出はスマホで期待どおり動きません。

多くのモバイルブラウザは互換のために、タップした要素に一時的に :hover を適用することがあります。これが「一度タップした要素のホバーが残ったまま」という、もう一つのよくある症状の正体です。

hoverだけに頼った設計の何が問題か

ドロップダウンメニューを :hover だけで開閉していると、スマホでは開けない、あるいは開いたまま閉じられないといった問題が起きます。重要な操作をホバーに依存させると、タッチユーザーが機能にたどり着けません。

つまりホバーは、あくまで「あれば嬉しい補助的な演出」と位置づけ、必須の操作はタップやクリックで完結する設計にしておくのが安全です。

症状別チェック表

スマホでホバーが効かないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

タッチでも動くように直す手順

ホバー前提のメニューやボタンを、タッチ端末でも操作できるように見直します。

1. メニュー開閉など必須の操作を、:hover ではなくタップ（クリック）で切り替わるようにする。
2. 開閉状態は JavaScript でクラスを付け外しするか、details/summary など標準要素で実装する。
3. ホバー演出は @media (hover: hover) の中だけに入れ、ホバーできる環境にのみ適用する。
4. 色変化などは :hover に加えて :focus / :active も用意し、タップやキーボードでも反応させる。
5. 実機またはタッチエミュレーションで、開く・閉じる・他をタップして閉じる、を順に確認する。

メディアクエリでホバー環境を見分ける

@media (hover: hover) は、その端末が本当にホバー可能か（主にマウスを持つか）を判定するメディアクエリです。これで囲んだホバー演出は、マウス環境にだけ適用され、タッチ端末では発火しません。

逆に @media (hover: none) でタッチ端末向けの調整を分けることもできます。ホバー残りの症状は、ホバー演出をホバー環境に限定するだけで多くが解消します。

ポインタの精度を見る pointer: fine / coarse も併用すると、より細かく出し分けられます。まずは hover メディア特性で囲う方針が分かりやすくおすすめです。

実機での挙動をその場で確認してもらう

ホバーやタッチの挙動は、エミュレーションと実機で差が出ることがあります。最終確認は実際のスマホで触ってもらうのが確実で、修正のたびに本人に試してもらえると認識のずれが減ります。

ギガサイト便なら、HTML をドロップして発行された 〇〇.giga-site.com の URL を相手のスマホで開いてもらうだけで、その場でタップ操作を試せます。QR コードの配布にも対応しているので、スマホで読み取ってすぐ開いてもらえます。

同じ URL のままファイルを差し替えられるため、メニューの修正版を出すたびにリンクを送り直す必要はありません。エッジ配信で表示も速く、実機チェックのテンポを落としません。