Hover for information display. || CSS

[Savoir-Faire]

I've been working with CSS for quite a while now, and I saw, recently, an effect that I really want to learn.
http://vampirefreaks.com/cult/nco <--- That, right there is a link to what I saw.
If you roll your mouse over one of the words in the layout, it displays information that pertains to that word.
I've seen attempts at this in my research for attempting to learn, but all of the sites I've found show you how to do it, however, when your cursor leaves the word, the text and box disappear.
In the example above, you can hover over the box, and it doesn't disappear until you hover outside of it.
I tried pagesourcing, but her coding is written incorrectly, and to be honest, sifting through it was starting to give me a migraine. (I'm a sucker for properly written code and anything else just irritates me to no end.)
If someone could offer up some help of any sort, that would be great.
Even a link to a tutorial that actually shows what I'm asking for would be greatly appreciated.

 

[essellar]

The code is written quite correctly -- well, except that the cursor is getting set to a resize in a non-resizable area, which is an unforgivable UI sin. Is your problem with the page that not all of it is pretty-printed? Get used to it -- whitespace is insignificant, and just adds to page size. I would have minified the CSS a lot further, made the CSS a single, separate file and gzipped it to reduce the download time. You can, in any decent text editor (that is, in just about anything but Notepad) use regular expressions to add line breaks and indents. Some even have a "pretty print" function built-in. I remember Firefox having a pretty-printed view source extension at one time -- it may be part of the Web Developer Toolbar.

In any case, the hover and link/visited states for the links are different sizes. Link and visited are smaller, with the overflow set to hidden. When you hover, the link gets larger, the stuff that was hidden gets displayed, and you have to move your mouse completely out of the now-larger anchor to leave the hover state.

 

[misson]

The code is written quite correctly

Not so much. And tables for layout? Honestly.

As for the effect, pure CSS menus and Suckerfish menus are a better illustration.

 

[essellar]

If you take a good look at the page, rather than just run it through a validator, you'll see that it's backwards-compatible to both IE5 and Netscape 4.7. Having spent a significant amount of time having to support NS4.x (it still had a significant share as late as 2005 among our users, and for a financial services company it doesn't pay to tell people watching their pensions to upgrade or die) I can tell you that the site is about as good as it gets (and that it degrades gracefully). And yes, tables for layout is wrong from a web standards point of view, but sometimes one needs to consider the customer base (and the age of the site).

 

[Teensweb]

It won't be very hard if you are not too new to js and/or css.

Not so much. And tables for layout? Honestly.

BTW, that was a mess of a page, 99% of the pages I have in my site are totally error free!

 

[n.urked]

http://docs.jquery.com/UI/Dialog

This can solve all your problems