---
title: "スマホでホバーが効かないときの対処"
description: "PCでは動くホバー演出がスマホでは効かない・タップ後に状態が残るのは、タッチ端末にホバー状態がないことが根本原因です。スマホで意図通り動く実装に切り替えるための考え方と方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/hover-not-working-mobile"
markdown: "https://giga-site.com/articles/hover-not-working-mobile/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# スマホでホバーが効かないときの対処

PC ではきれいに動くホバーメニューやボタンの色変化が、スマホでは反応しない、または一度タップすると効きっぱなしになる。これはバグというより、タッチ端末にはマウスのような「ホバー」という状態がそもそも存在しないことが原因です。この記事では、その前提とタッチでも破綻しない作り方を解説します。

> Source HTML: https://giga-site.com/articles/hover-not-working-mobile
> Article index: https://giga-site.com/articles/index.md

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

マウス操作では、カーソルを要素の上に乗せている間が :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 のままファイルを差し替えられるため、メニューの修正版を出すたびにリンクを送り直す必要はありません。エッジ配信で表示も速く、実機チェックのテンポを落としません。

## よくある質問

### なぜスマホではホバーが効かないのですか。

タッチ操作にはマウスのようにカーソルを乗せ続ける状態がなく、:hover の前提が成り立たないためです。必須の操作はタップ（クリック）で完結する設計に変えるのが基本です。

### 一度タップした要素のホバーが残ってしまいます。

モバイルブラウザがタップ要素へ一時的に :hover を当てるためです。ホバー演出を @media (hover: hover) の中に入れ、ホバー可能な環境だけに適用すると解消します。

### ホバーメニューをスマホでも開けるようにするには。

開閉を :hover ではなくタップ（クリック）でトグルする実装に変えてください。details/summary 要素や JavaScript でのクラス切り替えが扱いやすい方法です。

### @media (hover: hover)とは何を判定していますか。

その端末がホバー可能か、主にマウスのような精密ポインタを備えるかを判定します。これで囲んだスタイルはマウス環境のみに適用され、タッチ端末では発火しません。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [共有先でパスワードが通らないときの対処](https://giga-site.com/articles/password-not-working/index.md)
- [canvas・WebGLが動かないときの原因と対処](https://giga-site.com/articles/canvas-webgl-not-working/index.md)
- [localStorageが使えない・保存されないときの対処](https://giga-site.com/articles/localstorage-not-working/index.md)
- [CSS・JSアニメーションが動かないときの対処](https://giga-site.com/articles/css-animation-not-working/index.md)
- [外部APIが呼べない・データが出ないときの対処](https://giga-site.com/articles/external-api-not-working/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "スマホでホバーが効かないときの対処",
  "description": "PCでは動くホバー演出がスマホでは効かない・タップ後に状態が残るのは、タッチ端末にホバー状態がないことが根本原因です。スマホで意図通り動く実装に切り替えるための考え方と方法を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/hover-not-working-mobile",
  "url": "https://giga-site.com/articles/hover-not-working-mobile",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "なぜスマホではホバーが効かないのですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "タッチ操作にはマウスのようにカーソルを乗せ続ける状態がなく、:hover の前提が成り立たないためです。必須の操作はタップ（クリック）で完結する設計に変えるのが基本です。"
      }
    },
    {
      "@type": "Question",
      "name": "一度タップした要素のホバーが残ってしまいます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "モバイルブラウザがタップ要素へ一時的に :hover を当てるためです。ホバー演出を @media (hover: hover) の中に入れ、ホバー可能な環境だけに適用すると解消します。"
      }
    },
    {
      "@type": "Question",
      "name": "ホバーメニューをスマホでも開けるようにするには。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "開閉を :hover ではなくタップ（クリック）でトグルする実装に変えてください。details/summary 要素や JavaScript でのクラス切り替えが扱いやすい方法です。"
      }
    },
    {
      "@type": "Question",
      "name": "@media (hover: hover)とは何を判定していますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "その端末がホバー可能か、主にマウスのような精密ポインタを備えるかを判定します。これで囲んだスタイルはマウス環境のみに適用され、タッチ端末では発火しません。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```