JavaScript和CSS：在鼠标悬停时在元素上显示div

Question

当你悬停个人资料图片时，我希望在悬停时显示元素（特别是链接）上的div，就像在Facebook中一样。

我知道这可以通过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;
}