[SOLVED] HTML Rollover Effect Elsewhere on Page

[njdirt]

Hello,

  So, I know I've seen this done before, but I don't know how to do it:

 

Take this Layout, though right now it is just an image...

 

If someone were to mouse over "About" I would like the text "Who We Are" to appear to the left of About, in that open space.  If someone moused over "Services" I'd like "What We Do" to appear in the same space.  I will also have the links themselves do a rollover effect, though I know how to do that.

 

If anyone could point me in the right direction, I'd appreciate it very much!  Thanks in Advance!

 

 

[Ken2k7]

What happens on mouse out?

 

I would add a span tag before About and have JavaScript take care of the rest.

[TheFilmGod]

You could do this purely in css. Eric Meyer made something like that.

 

How it works:

 

<div id="nav">

<ul>

    <li class="about">

      <a>About</a>

        <span>Who we are</span>

    </li>

    <li class="contact">

    <a>Contact Us

      <span>Get in touch</span>

    </li>

</ul>

</div>

 

Span is hidden. Display: none;

 

On the mouse hover:

 

ul li.about:hover span {

display: block;

}

 

You get the idea. Google is your friend.

[njdirt]

Thanks, Film God!  I'll see if I can;t make that work

[njdirt]

Found a solution for my problem here:

http://www.javascript-fx.com/fade_rollovers/general_help/help_remote.html

 

Works great - thanks for all of your help too!