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 :frowning:

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

Im not sure about how to do it, but its

visibility: visible;

Hi,

This is the code you need.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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:


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

Hope that helps.

Paul

Thanks very much Paul, that’s exactly what I was looking for :smiley: