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

Question

我想在悬停时在元素（尤其是链接）上显示一个 div，例如在 Facebook 中，当您悬停个人资料图片时。

我知道这可以用 JavaScript 和 CSS 来完成，但不知道。

Answer 1

Facebook 的方法是简单地使用 CSS，这并不适用于所有浏览器。在这些浏览器中，Facebook 放弃了效果并始终显示只应在悬停时显示的元素：

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

在 IE7 及以下版本中使用条件 CSS 设置display: block为默认值。

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;
}