Creating pure .css popups

Hands-on: What to Do

Any browser that does a good job of supporting positioning will get some of the stuff I did here correct, so continuing onward is probably worth it. The basic drill is this: mouse over the links on the left side of the page. Watch the space below the links. Make sure to mouse over all the links, back and forth, up and down...

Again I say it: no Javascript was used in the making of this page.
What the...? You lie!
I do not. Here's how it's done.

In every case, the "caption" text is a span element inside the actual hyperlinks. Here's one example from the source of this document:

<a href="http://www.yoursite.com/links">Links<span>A collection 
of things which interest me, and might interest you</span></a>

Code (markup):

To prevent the text from showing up when the page loads, I have the following style:

div#links a span {display: none;}

Code (markup):

So they're gone, removed entirely from the document flow. Bringing them back, then, is a simple matter of switching the display to block and positioning the element whenever the associated link is hovered over with the mouse pointer. Thus we get the first two lines of this rule:

div#links a:hover span {display: block;
   position: absolute; top: 200px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

Code (markup):

The last three lines relate to how the element will be styled when it appears, but the first two cause it to be made visible (display: block and position it appropriately.

Want to have even more fun? How about icons that appear on rollover?
A Minor Side Note

Notice how the hyperlinks appear to overlay the main-content border, and how that overlap really lights up when you're hovering over a link but still has a gray stripe down the middle of the overlap. That's done with nothing more complicated than a border on the hyperlinks themselves, the color and style of which change during the hover:

div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

Code (markup):

This effect works because I set up everything so the borders on the hyperlinks actually overlaps the border of the main content area. Because I'm positioning these elements using pixel measures, I can get things to line up appropriately and then style them however I like. it's a bit of a trick, of course-- by sticking to shades of gray, it's easier for me to create translucency effects. Someone with a sufficiently keen color sense could probably come up with better stuff than I did. (Like not putting light text on a dark background, for starters.)

 

Copy, pasting and not crediting the author.

Disgusting I tell you. Kids of today!

 

i stole it from another site actually ROFL..... still usefull to know
have to get to 50 posts sumhow

 

Not that your post isn't useful but you should credit the author with a link to his site. Most of the members here are webmasters, so ripping off a webmaster won't go over lightly with them.

You don't want to reach 50 posts with red reputation

 

damn, didnt think about that lol

 

wow an infraction and bad rep

found a better code.....

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}

Code (markup):

thanx SantaKlauss