将鼠标悬停在图像/链接/其他div上后如何显示DIV?

时间:2010-12-30 06:05:05

标签: html css

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

另外,如果你可以,在你告诉我如何做以上之后你还能告诉我如何在隐藏的div上使用滑动动画吗?所以当你将鼠标悬停在A上时,B会滑入?

1 个答案:

答案 0 :(得分:2)

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

#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动画的支持目前很差。