http://www.baelkopat.com/GECCo/goingGreenTest.html is what I have so far. What I need to learn is how to show the additional text when a user mouseOvers the link. i.e. when a user mouseOvers on "Activity Guide(PDF)" the "Download and print...." shows up. I have pretty good experience with ActionScript not that very new to JavaScript. I was wondering how to make the mouseOver effect happen.

The hover div is crated using css

overTextA{

position:absolute;
left:190px;
top:7px开发者_StackOverflow;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;

}

overTextB{

position:absolute;
left:190px;
top:40px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;

}

and in HTML

<div id="overTextA"> Download and print a PDF-version of the Junior <i>Going Green with GECCo</i> guide, with activity information, instructions, and resources. </div>

<div id="overTextB"> Take the <i>GECCo Challenge !</i> Help our planet by saving energy AND earning money for conservation.</div>

I am not sure that is the best way to do it but for now I just want to have a workable version working that shows the appropriate text when mouseOver on the nav link.

Thanks, Rex

---

You could achieve this in a straight forward fashion using a library like jQuery. Here is a tutorial that will walk you through using a .hover() function:

http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything

Clarification:

Add / remove your classes to the hover element, adding would display it, and removing or hiding it would take the text element away. jQuery is very useful when you don't want to dive into JS too much. Hope that helps!