esempio base:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function mostra(ele){
	//alert(ele);
	document.getElementById('_'+ele).style.visibility='visible';
}
function nascondi(ele){
	document.getElementById('_'+ele).style.visibility='hidden';
}
</script>
<style type="text/css">
.tastiDiv{
	color: #666;
	background-color: #CCC;
	float: left;
	height: 45px;
	width: 32%;
	margin-right: 5px;
	text-align:center;
	padding-top:25px;
}
.testoDiv{
	visibility: hidden;
	float: left;
	width: 32%;
	margin-right: 3px;
	border: 1px solid #CCC;
}
.clear{clear:both;}
</style>
</head>

<body>
<div id="main">
  <div id="uno" class="tastiDiv" onmouseover="mostra(this.id)" onmouseout="nascondi(this.id)"> tasto uno </div>
  <div id="due" class="tastiDiv" onmouseover="mostra(this.id)" onmouseout="nascondi(this.id)"> tasto due </div>
  <div id="tre" class="tastiDiv" onmouseover="mostra(this.id)" onmouseout="nascondi(this.id)"> tasto tre</div>
  <div class="clear"></div>
  <div id="_uno" class="testoDiv">testo uno</div>
  <div id="_due" class="testoDiv">testo due</div>
  <div id="_tre" class="testoDiv">testo tre</div>
</div>
</body>
</html>