<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 判断鼠标位置让div消失</title>
<style type="text/css">
<!--
body{margin:0px;padding:0px;}
-->
</style>
<script>
function c()
{
document.getElementById('h_div').style.display = "";
return false;
}
function d()
{
//alert(window.event.clientX);
//alert(window.event.clientY);
var wx = window.event.clientX;
var wy = window.event.clientY;
var d_left = document.getElementById('h_div').offsetLeft;
var d_top = document.getElementById('h_div').offsetTop;
var d_width = document.getElementById('h_div').clientWidth;
var d_height = document.getElementById('h_div').clientHeight;
//alert(wx + '_' + wy + '_' + d_left + '_' + d_width + '_' + d_top + '_' + d_height)
if(wx < d_left || wy < d_top || wx > (d_left + d_width) || wy > (d_top + d_height))
document.getElementById('h_div').style.display = "none";
return false;
}
</script>
</head>
<body onClick="javascript:d();" >
<div onMouseOver="javascript:c();" style="width:150px;height:30px;margin:auto;margin-left:200px;border:1px solid red;position:relative;">
Click me
</div>
<div id="h_div" style="display:none;position:absolute;margin-top:0px;margin-left:200px;width:150px;height:100px;border:1px solid green;font-size:12px;">
<input type="checkbox" id="aa" name="aa" title=""/><label for="aa">第一个</label><br />
<input type="checkbox" id="bb" name="bb" title=""/><label for="bb">第二个</label><br />
<input type="checkbox" id="cc" name="cc" title=""/><label for="cc">第三个</label><br />
<input type="checkbox" id="dd" name="dd" title=""/><label for="dd">第四个</label><br />
<input type="checkbox" id="ee" name="ee" title=""/><label for="ee">第五个</label><br />
</div>
</body>
</html>
---------------------------------2012.08.20---------------------------------------------
今天发现了一个新的方法：
$(document).ready(function(){
$("#infoWindow").live("mouseenter",function(){
//处理流程
});
$("#infoWindow").live("mouseleave",function(){
//处理流程
});
});
关键在于函数：mouseenter和mouseleave，这两个函数是jquery封装的函数，
可以监控鼠标移近和移出指定的div