<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$(".wrap").mouseenter(function(){
$(this).find(".window").stop().show(400);
}).mouseleave(function(){
$(this).find(".window").stop().hide(400);
})
});
</script>
<style>
.wrap{width:200px; height:200px; margin:50px auto; border:1px solid #CCC; position:relative;}
.window{ width:100px; height:50px; background:#ccc; border:1px solid #CCC; display:none; position:absolute; top:20px; left:20px;}
</style>
</head>
<body>
<div class="wrap">
<div id="text">simple text<div class="window"></div></div>
</div>
<div class="wrap">
<div id="text1">simple text<div class="window"></div></div>
</div>
<div class="wrap">
<div id="text2">simple text<div class="window"></div></div>
</div>
</body>
</html>