CSS `hover` メディア特性

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年12月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

hover は CSS のメディア特性で、第一の入力機構で要素にかざす（ホバー）操作ができるかどうかを検査するために使用することができます。

構文

hover 特性は、以下の一覧のうち一つのキーワード値で指定します。

none: 第一の入力機構が全くかざす操作ができないか、かざす操作を簡単に行うことができない（例えば、多くのモバイル機器は便利ではないものの、ロングタップのユーザー操作で擬似的にホバーを実現する）、または第一の入力機構がない。
hover: 第一の入力機構が、要素の上でかざす操作を簡単に行うことができる。

例

HTML

html

<a href="#">この上でかざしてみてください！</a>

CSS

css

/* デフォルトのホバー効果 */
a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /* ホバーに対応している場合 */
  a:hover {
    color: white;
    background: black;
  }
}

結果

仕様書

仕様書
Media Queries Level 4 # hover

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年8月28日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS hover メディア特性

MDN の改良に協力

CSS `hover` メディア特性