怎么判断当前鼠标是否在一个指定的元素下面

如何判断当前鼠标是否在一个指定的元素上面？
具体的想法是这样：
我想做一个类似菜单的按钮，然后当鼠标移动到按钮上时会出现一个下拉菜单，然后如果当鼠标移动到菜单上时，这个菜单不会消息，然后如果要是当前鼠标既不在按钮上又不在菜单上时就会消失，所以我对当鼠标移动到按钮上后已经显示菜单后怎么判断鼠标是不是移动到了菜单上感到困惑，请大家帮忙下

------解决方案--------------------
<script type="text/javascript">
function init(){
var a=document.getElementById("test");
var b=document.getElementById("div");
a.onmouseover=s;
a.onmouseout=h;
b.onmouseover=s;
b.onmouseout=h;
}
function s(){
var b=document.getElementById("div");
b.style.display="";
}
function h(){
var b=document.getElementById("div");
b.style.display="none";
}
window.onload=init;
</script>
<input type="button" value="test" id="test">
<div id="div" style="background-color:#0F0; width:100px; height:400px;display:none"></div>
这样试试
------解决方案--------------------
主要就是延时，例如

HTML code


<!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>
    <title></title>

 <style type="text/css" >
 .subs{display:none;width:200px; background-color:Gray;}
</style> 


</head>
<body>

<a id="item1" onmouseout="settimerhide()" onmouseover="itemover()" >menu</a>
 <div id="sub1" class="subs" onmouseout="settimerhide()" onmouseover="subsover()" >
 some sub text<br />
 some sub text<br />
 some sub text
  </div>
  
 <script type="text/javascript" >
     var timershow, timerhide;

     function itemover() {         
         if (timerhide) { window.clearInterval(timerhide); }
         if (document.getElementById("sub1").style.display != "block") {
             timershow = window.setTimeout("document.getElementById('sub1').style.display = 'block';", 200)
         }
     }

     function subsover() {
         if (timerhide) { window.clearInterval(timerhide); }     
      }
     
    

 function settimerhide() {
     timerhide = window.setTimeout("document.getElementById('sub1').style.display = 'none';", 200)
  }
 
 
     
 </script>
 
</body>
</html>

怎么判断当前鼠标是否在一个指定的元素下面

相关推荐