SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    California
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display hidden span onmouseover using only CSS

    Hi,

    what i'm trying to do is get it so that when the user hovers over a link it displays the contents of a hidden span tag inside the anchor tag, the code for the link looks somthing like this:

    <a href="index.html">Home<span>Return Home</span></a>

    where the span containing "Return Home" can be positioned else where, I've seen an article that talks about this, but i've lost the link

    I'm trying to get it down myself, but with no luck, i was trying things like this:

    for the initial span tag to be hidden:

    #nav ul li span {
    position: relative;
    top: 175px;
    visibility: hidden;
    }

    then to show it:

    #nav ul li a:hover span {
    position: relative;
    top: 175px;
    visibility: show;
    }

    any ideas?

    Thanks

  2. #2
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im not sure about how to do it, but its

    visibility: visible;

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is the code you need.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #nav ul li a span {
    display:none;
    }
    a {background:#fff;}
    a:hover {background:#FFFFFC}
    #nav ul li a:hover span {
    position:absolute;
    top:175px;left:50px;
    display:block;
    }
    </style>
    </head>
    <body>
    <div id="nav">
    <ul>
    <li><a href="index.html">Home<span>Return Home</span></a></li>
    </ul>
    </div>
    </body>
    </html>
    IE won't show the span unless the background or border changes on the hover. This is usually what you want anyway but if you don't you can make the colour so close it doesn't matter. (there are other ways to do this such as changing the borders.)

    display:none is better because it removes the span completely from the document. Visibility hidden just hides it but still leaves the space there.

    Position:relative moves the object in relation to itself but reserves the space it previously occupied so it is probably better to use position absolute. If you want to place the span absolutely from a parent div instead of the body then you will need to give your #nav a position:relative so that it has a stacking context (point of reference).

    Here's another example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    p#tips a {
    text-decoration:none;
    border-bottom:2px solid green;
    color: #FF0000;
    }
    p#tips a:hover {
    color: #666666;
    background: #FFFFCC;
    text-decoration: none;
    }
    p#tips a span {display: none;}
    p#tips a:hover span {
    display: block;
    position: absolute;
    top: 50px;
    left: 10%;
    width: 200px;
    padding: 5px;
    margin: 10px;
    z-index: 100;
    color: #0000CC;
    background: #FFFFCC;
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    border: 1px solid #666666;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <p id="tips">This is some text :<a href="#"> <strong>Mouse over 
    here </strong><span> (This is the help text that will be displayed on rollover 
    in compliant browsers : This is the help text that will be displayed on rollover 
    in compliant browsers. This is the help text that will be displayed on rollover 
    in compliant browsers : This is the help text that will be displayed on rollover 
    in compliant browsers. ) </span></a> this is some more text:</p>
    </body>
    </html>
    Alternatively tou could just add a tooltip with the title tag:
    Code:
    <a title="Return Home" href="index.html">Home</a>
    Hope that helps.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Jan 2004
    Location
    California
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much Paul, that's exactly what I was looking for


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
  •