SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    link hover text window

    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:

    Code:
    <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. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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/cod...popup-menu.php

  3. #3
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric. I'm cool like this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •