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