JavaScript and CSS: display a div over an element on mouseover

Question

I want to display a div over an element (especially a link) when hovered, like in Facebook, when you hover a profile picture.

I know this could be done with JavaScript and CSS but have no exact idea.

Answer 1

Facebook's approach is to simply use CSS, which won't work in all browsers. In those browsers Facebook ditches the effect and always shows the element that should only display on hover:

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

Use conditional CSS to set display: block as the default in IE7 and below.

Answer 2

This can actually be done with pure css, here is a simple example:

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