Hidden and Visible DIVs

Posted on 2000-03-01
Last Modified: 2013-12-25
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.
Question by:cavacasp
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3

Expert Comment

ID: 2574561
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="'visible'"

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

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


Expert Comment

ID: 2578341
Even better, use:

<div name=div1 id=div1 onmouseover="'block'"

onmouseout="'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...

Expert Comment

ID: 2580152
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".



Author Comment

ID: 2592542
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


Accepted Solution

TTom earned 150 total points
ID: 2592721

Happy to be of assistance.


Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question