Hidden and Visible DIVs

I have an unorder list of items that are hyperlinks.  I also want to have a DIV on the same line as the list item, just to the right of it.  This DIV should be invisible when the page is loaded.
When a person moves over the link I want to corresponding DIV to become visible and when they move off the link the div should be invisible again.

Just for an example create a list with the following items; Sleep, Disease, Blindness and each of the corresponding DIV should be contain the words Caused By.
Who is Participating?

Improve company productivity with a Business Account.Sign Up

TTomConnect With a Mentor Commented:

Happy to be of assistance.

Try this out.  It will work in IE, but you will have to play with it to get it functional in NS.

<title>Tom's Test Page</title>
<script language=JavaScript>
<!-- Hide from older browsers

<!-- Remember to save this page with another name -->
<div name=div1 id=div1 onmouseover="div2.style.visibility='visible'"

onmouseout="div2.style.visibility='hidden'">Sleep <span name=div2 id=div2

style='hidden'>caused by</span></div>

Even better, use:

<div name=div1 id=div1 onmouseover="div2.style.display='block'"

onmouseout="div2.style.display='none'">Sleep <span name=div2 id=div2

style='display:none'>caused by</span></div>

Because the display property determines whether the div is actually rendered, and any text/tags underneath the div will get shifted up.  But then again, I'm not sure how compatible this is with NS...
More info.

The "display" property (probably because it does not render the div) makes the span display below the first (as opposed to alongside it).

Niether of these bits works in NS, but I THINK, NS supports different properties for "visibility", i.e. M$ = "visible"; NS = "show", or something like that.

There are also going to be problems with whether or not NS supports the visibility property of a <DIV> or <SPAN>.

In any case, here is a link to the NS documentation on working with "positioned" blocks of text, etc.


FWIW, the NS developer site definitely has some more info on this stuff.  Go and search the site for "visibility".


cavacaspAuthor Commented:
TTom submit as an answer.  That works just like I need it to, expect of course you had one small mistake in this line
where it should have been

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.