Hello,

How to make this kind of logic works? :D

<a onmouseover="document.getElementById['foo'].style.visibility='visible'" href="foo">Foo</a>

<div id="foo" style="visibility: hidden;">Bar</div>

Basically I want to show and hide a div on mouseovers/outs and I want to do it as simple as possible but also as cross-browser as possible.

Thanks for any comment

---
Site of the Day

Your code is fine except you used brackets "[]" when you should have used parens "()".

<a onmouseover="document.getElementById('foo').style.visibility='visible'"
onmouseout="document.getElementById('foo').style.visibility='hidden'"
href="foo">Foo

<div id="foo" style="visibility: hidden;">Bar</div>

For cross-browser compatibility you might want to look at trying visibility and or display. You might have to use one or both to get the results you want. If a browser does not support either one, then there's nothing you can do in CSS to make it happen, you would probably have to get into some more advanced JavaScript.

Also, you need to change the href to actually point to a valid url if you want it to be a link or you could set the href to "#" or just make it a div (makes the most sense if it will not be a link).
Michael J

lol, ok :D

I looked back at those so many pages I searched before, and none of them use brackets, didn't know how it get into the code :D

Thanks for the other suggestion, I'll use both display and visibility, and yes the href will point to a real link.

Thanks again Michael.

---
Site of the Day

Just for kicks and giggles...

The only downside to using "#" as a 'null' in the href attribute is that it will cause the browser to jump to the top of the page. This can be a pain sometimes.

An alternative is to set the href to "javascript:;". The browser will do nothing at all with this.