<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#txt {
height: 20px;
border: 1px solid;
}
#box {
width: 100px;
height: 100px;
background-color: orange;
display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
function posMouse(e){
var mouX = 0, mouY = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY) {
mouX = e.pageX;
mouY = e.pageY;
} else if (e.clientX || e.clientY) {
mouX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
mouY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"x":mouX, "y":mouY}
}
$(document).ready(function(){
$('#txt').mouseover(function(){
$(this).next().slideDown('slow');
})
.mouseout(function(e){
var elem = $(this).next(), mou = posMouse(e);
if ((mou.x < elem.offset().left) || (mou.x > elem.offset().left + elem.width()) || (mou.y < elem.offset().top))
elem.slideUp('slow');
});
$('#box').mouseout(function(){
$(this).slideUp('slow');
});
});
</script>
</head>
<body>
<div id='txt'></div>
<div id='box'></div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</body>
</html>