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>→ Real's HowTo</span></a> </div></li> <li><div id="question"> Question: What are the languages covered?<br/> <a href="#">Answer:<span>→ Javascript, Java and VBScript</span></a> </div></li> <li><div id="question"> Question: What can I do?<br/> <a href="#">Answer:<span>→ Buy me a coffee :-)</span></a> </div></li> </ol> </body> </html>
Place your mouse/cursor over "Answer" to view the answers
- Question: What's this site name?
Answer: → Real's HowTo - Question: What are the languages covered?
Answer:→ Javascript, Java and VBScript - 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