Link hover text window

HTML & CSS
1

I’m wanting a link that shows a window of text when you hover over it.

That’s the easy part - I’ve already got that working.

But I’m wanting a link inside that text. And I want the window to stay open long enough for the user to click the link.

Here’s what the easy part looks like:

<p> <a class="infobox" href="">(?)<span> Lots of cool stuff goes here
</span></a></p> 

	<style type="text/css"> 

  a.infobox { text-decoration:none; }
  a.infobox:hover { cursor:help; color:#c30; background:white; }
  a.infobox span { visibility:hidden; position:absolute; left:-99em;
    margin-top:1.5em; padding:1em; text-decoration:none; width: 200px; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:1em;
    border:1px solid #000000; color:black; background:white; }
</style>

I welcome any tips on how to put a link on the “Lots of cool stuff goes here” part.

Thanks!

2

Can’t have a nested anchor. So put the hover on something else (p, li, whatever). Then don’t have any space between the anchor text and the hovered box in order to keep it open. So position it left 0. If you need to push it away do it with padding.

If you need it to stay open regardless you’ll need to use js or do it this way… http://www.visibilityinherit.com/code/css-popup-menu.php

3

Thanks Eric. I’m cool like this.