Share this page 

Hide/Unhide text with mouse overTag(s): HTML/CSS


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
  div#question { margin-bottom:5px; }

  div#question a { 	display: block;	margin-left:20px;
  	                text-decoration: none;color:black;
  }

  div#question a:hover { background: none; }

  div#question a span { display: none;  }

  div#question a:hover span { display: inline; padding: 25px;
	                          width:250px;
  }
</style>
</head>
<body>
Place your mouse/cursor over "Answer" to view the answers
<ol>
<li><div id="question">
 Question: What's this site name?<br/>
	<a href="#">Answer: <span>&rarr; Real's HowTo</span></a>
	</div></li>

<li><div id="question">
	Question: What are the languages covered?<br/>
	<a href="#">Answer:<span>&rarr; Javascript, Java and VBScript</span></a>
</div></li>

<li><div id="question">
	Question: What can I do?<br/>
	<a href="#">Answer:<span>&rarr; Buy me a coffee :-)</span></a>
</div></li>
</ol>
</body>
</html>
Try it here :

Place your mouse/cursor over "Answer" to view the answers

  1. Question: What's this site name?
    Answer: → Real's HowTo
  2. Question: What are the languages covered?
    Answer:→ Javascript, Java and VBScript
  3. Question: What can I do?
    Answer:→ Buy me a coffee :-)
Note : This won't works in IE Quirks mode, you need the appropriate DOCTYPE directive.
See also this HowTo
mail_outline
Send comment, question or suggestion to howto@rgagnon.com