Show Html Elements above other Elements on MouseOver using Javascript

Question

On this page in Espn.com, if you go to the upper right corner and hover over "myESPN", an inline popup window (if that is what it can be called) appears (in such a way that it looks connected to the initial button) and allows the user to log in to the site.

In the html it looks like there is a hidden div that is made visible and is pushed to the front when the mouse goes over a certain element, and stays in view as long as the mouse remains on the calling element, or the newly shown element itself.

I am looking to do something similar. However, after poking around a bit with Firebug, I am unable to identify exactly how it is done. I assume that it involved javascript, and probably jquery as well - can anyone help with the specifics on implementation?

Answer 1

What you need is an absolutely-positioned div-element, which you position the way you want it to appear. Then you hide it with style="display: none;", and on mouseover of the right element, you show it. With jQuery that'd be:

HTML:
<div id="layer" style="display: none; position: absolute; top: 10px; left:   300px;">something</div>

Javascript:
$('#elementToHover').mouseover(function() {
    clearTimeout(timeout);
    $('#layer').show();
});

Edit:
To hide it:

var timeout;
$('#elementToHover').mouseout(function() {
    timeout = setTimeout("hide()", 1000);
});
$('#layer').mouseover(function() {
    clearTimeout(timeout);
});
$('#layer').mouseout(function() {
    timeout = setTimeout("hide()", 1000);
});
function hide() {
    $('#layer').hide();
}

or something similar...