javascript - JavaScript と CSS: マウスオーバーで要素の上に div を表示する

Question

Facebook のように、プロフィール画像にカーソルを合わせたときに、要素 (特にリンク) の上に div を表示したいと考えています。

これは JavaScript と CSS で実行できることは知っていますが、正確なアイデアはありません。

Answer 1

Facebook のアプローチは単純に CSS を使用することですが、これはすべてのブラウザーで機能するとは限りません。これらのブラウザーでは、Facebook は効果を捨てて、ホバー時にのみ表示される要素を常に表示します。

#parent #child {
  display: none;
}
#parent:hover #child {
  display: block;
}

条件付き CSS を使用display: blockして、IE7 以下でデフォルトとして設定します。

Answer 2

これは実際には純粋な css で行うことができます。簡単な例を次に示します。

HTML:

<div id='outer'>
    <div id='button'>
        <!-- your element here -->
    </div>
    <div id='popup'>
        <!-- your popup menu here -->
    </div>
</div>

CSS:

#popup {
    visibility:hidden;
}

#outer:hover #popup {
    visibility:visible;
}