将鼠标悬停在图像/链接/另一个 div 上后如何显示 DIV？

Question

我以前做过，但遗憾的是我忘记了。我用简单的 CSS 做的，所以不应该使用 javascript 或 jquery。我想要的只是显示 A，当您将鼠标悬停在 A 上时显示 B。

另外，如果可以的话，在你告诉我如何做上述之后，你能告诉我如何在隐藏的 div 上使用滑动动画吗？那么当您将鼠标悬停在 A 上时，B 会滑入？

Answer 1

这里有一些在 IE 6 中无法使用的纯 CSS。它涉及在链接和框 (#tooltip) 周围包装一个容器 #outer。当然，在实际应用中，您可能希望使用绝对定位来定位框。

#tooltip {
    display: none;
}

#outer:hover #tooltip {
    display: block;
}

还有 HTML (try it)：

<div id="outer">
    <img src="http://www.google.com/images/logos/ps_logo2.png">
    <div id="tooltip">Hello, world!</div>
</div>

对于动画，最好使用 jQuery 或其他 JS 库，因为目前浏览器对 CSS3 动画的支持相当差。