html - 将鼠标悬停在图像/链接/另一个 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 动画的支持相当差。