onMouseOver & onMouseOut layered divs

I'm trying to layer divs using "z-index"s — one background div with an image and a div directly on top of that with text and links in it.

The trick is, I want the top div with text and links to be hidden when the cursor is not over it, and to show up only when moused over.

It seems a kind of Catch-22 to have a div that shows up when you mouseover itself, if it hides when your mouse is not over it.

I tried putting the onMouseOver and onMouseOut code in the top div, in the bottom div, and in a third empty div on top of the other two. It doesn't work at all if it's in the div with the text and links(as I expected) and if it's in the bottom div, it kind of works, but the text in the top div flashes on and off constantly as the cursor moves around in it, which also makes links in the text pretty hard to click. If it's in a third div on top of both of the other two, it works but you can't click any links as they're under that invisible top div.

It's something like (this example being the one with the onMouseOver & Out code in the div with text & links that I want show/hide):

<div id="background" style="position:absolute; top:0; left:0; width:276px; height:110px; z-index:1;"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"></div>

<div id="text" onMouseOver="document.getElementById('text').style.visibility = 'visible'" onMouseOut="document.getElementById('text').style.visibility = 'hidden'" style="position:absolute; top:0; left:0; width:276px; height:110px; z-index:2; visibility:hidden;">bla bla bla <a href="http://www.google.com">bla</a> bla</div>

You could probably use text-indent: -5000px or something to hide the text, and then set it to 0 onmouseover. Any attempt at hiding the div will make it not catch mouse events.

There's also the option of programatically building the content onmouseover with DOM. You could cache that HTML as innerHTML and replace it onmouseover.

try this

<div id="background" style="position:absolute; top:0; left:0; width:276px; height:110px;" onmouseover="document.getElementById('text').style.visibility = 'visible'" onmouseout="document.getElementById('text').style.visibility = 'hidden'"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></div>

<div id="text" style="position:absolute; top:0; left:0; width:276px; height:110px; visibility:hidden" onmouseover="document.getElementById('text').style.visibility = 'visible'" onmouseout="document.getElementById('text').style.visibility = 'hidden'">bla bla bla <a href="http://www.google.com">bla</a> bla</div>

Thanks to you both!

Peter, your idea worked great-- I guess a little repetition was all that was needed!

you are welcome. the idea is when you are over the hrefs not to hide them

anyway glad i could help

Any attempt at hiding the div will make it not catch mouse events.

This is not necessarily the case. You can use the javascript to modify the opacity css property, and make an object completely invisible, but it will still catch the onmouseover, and onmouseout triggers. You can read more about it here (http://www.mandarindesign.com/opacity.html).