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"
<html xmlns="" xml:lang="en" lang="en">
<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;
Place your mouse/cursor over "Answer" to view the answers
<li><div id="question">
 Question: What's this site name?<br/>
	<a href="#">Answer: <span>&rarr; Real's HowTo</span></a>

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

<li><div id="question">
	Question: What can I do?<br/>
	<a href="#">Answer:<span>&rarr; Buy me a coffee :-)</span></a>
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