How to have a DIV appear after you hover over an image/link/another div?

I have done this before, but sadly I have forgotten. I did it with simple CSS, so no javascript or jquery should be used. All I want is for A to be showing, and for B to show when you hover over A.

Also, if you could, after you show me how to do the above could you also show me h开发者_开发知识库ow to use a sliding animation on the hidden div? So when you hover over A, B slides in?

Here is some pure CSS that will not work in IE 6. It involves wrapping a container #outer around both the link and box (#tooltip). Of course, in a real application, you will probably want to position the box using absolute positioning.

#tooltip {
    display: none;
}

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

And the HTML (try it):

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

For animations, you are best off using jQuery or another JS library because browser support for CSS3 animations is currently rather poor.