:hover

概要

:hover CSS 擬似クラス は、ユーザがポイティングデバイスで要素を示したときにマッチします。ただし、要素がアクティベートされる必要はありません。このスタイルは、続くルールに現れるリンク関連の擬似クラス :link:visited:active によって上書きされる可能性があります。うまくリンクにスタイルをつけるには、:hover ルールを :link:visited ルールの後、:active ルールよりは前に置く必要があります。LVHA の順 です :link:visited:hover:active

Firefox、Internet Explorer、Safari、Opera または Chrome のような視覚ユーザエージェントは、カーソル(マウスポインタ)が要素上に入ったときに、関連づけられたスタイルを適用します。

使い方の註: タッチスクリーンでは :hover には問題があるか、使えません。:hover 擬似クラスはまったくマッチしないか、要素を触った後の少しの時間だけマッチします。タッチスクリーンデバイスは広まっているので、ウェブ開発者は、ホバー時にだけアクセス可能なコンテンツを作らないことが重要です。そういったコンテンツは、タッチスクリーンデバイスのユーザから見えなくなってしまうでしょう。

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

:hover 擬似クラスを使うと、入り組んだ階層を持つアルゴリズムを作れます。これは、 JavaScript を使わずにドロップダウンメニューを作るのによく使われるテクニックです。このテクニックの真髄は、次のようなルールを作ることにあります:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

HTML の構造に用いると以下のようになります:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

実装例として、完成した CSSベースのドロップダウンメニュー例 をご覧ください。

:hover 擬似クラスを画像ギャラリーに使うと、プレビューの上をマウスが横切ったときにだけフルサイズの画像を表示することができます。実装例として このデモ をご覧ください。

注記: :checked 擬似クラス(ラジオボックスを隠すために用いられます)を使っても類似の効果を出せます。ja/CSS/:checked にあった このデモ をご覧ください。

仕様書

仕様書 策定状況 コメント
Selectors Level 4 草案 重要な変更無し
Selectors Level 3 勧告 重要な変更無し
CSS Level 2 (Revision 1) 勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
<a> 要素向け 0.2 1.0 (1.7 or earlier) 4.0 4.0 2.0.4 (419)
various bugs before
全要素向け 0.2 1.0 (1.7 or earlier) 7.0 7.0 2.0.4 (419)
various bugs before
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

関連情報

ドキュメントのタグと貢献者

タグ: 
最終更新者: ethertank,
サイドバーを隠す