鼠标移入 移出 显示与隐藏层的问题？

我有一个按钮图层 当我鼠标一上去的时候显示 一个菜单层
当我的鼠标移开 菜单层的时候  菜单层隐藏 
这样的效果如果从菜单层移到了按钮层 那么菜单层就不会隐藏了
请高手能给个解决方案。。当我从 菜单层 到 按钮层 的时候  菜单层也能隐藏<html>
<head>
<title>Example</title>
<script type="text/javascript">function $(id) {
return document.getElementById(id);
}var isShowMenu = false;
function showMenu() { if(isShowMenu == true)
return; isShowMenu = true; showEle("menu");
}function hiddenMenu() { if(isShowMenu == false)
return; isShowMenu = false; hiddenEle("menu");
}function showEle(eleId) {
var ele = $(eleId);
ele.style.display = "block";
}function hiddenEle(eleId) {
var ele = $(eleId);
ele.style.display = "none";
}</script><style>
#content {background-color:#E6E6E6;width:500px;height:500px;}

</style>
</head>
<body>
<div id="content">
<div id="menu" style="float:right;width:100px;height:200px;background-color:#F7BE81;display:none;" onmouseout="hiddenMenu();">菜单项</div>
<div id="menuBut" style="float:right;background-color:#F5F6CE; margin:0;width:20px;height:100px;padding-top:10px;padding-left:2px;" onmouseover="showMenu();" >快捷菜单</div>
</div>
</body>
</html>

解决方案 »

  1.   

    document.getElementById("div1").style="none"?"block":"none";
    可以判断下鼠标的位置document.elementFromPoint(event.x,event.y).tagNam!="td" 
      

  2.   

    document.getElementById("div1").style="none"?"block":"none"; 这个写法不对吧。是不是应该这样：document.getElementById("div1").style=="none"?"block":"none"; 
      

  3.   

    搞那么复杂啊, 帮你修改了,还变简单, 看看是不是你说的这样啊?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Example </title>
    <script type="text/javascript">
    function $(id) {
    return document.getElementById(id);
    }//var isShowMenu = false;  //去掉function showMenu() {
    /* 去掉
    if(isShowMenu == true) return;
    isShowMenu = true;
    */
    showEle("menu");
    }function hiddenMenu() {
    /*  去掉
    if(isShowMenu == false) return;
    isShowMenu = false;
    */
    hiddenEle("menu");
    }function showEle(eleId) {
    var ele = $(eleId);
    ele.style.display = "block";
    }function hiddenEle(eleId) {
    var ele = $(eleId);
    ele.style.display = "none";
    }
    </script>
    <style>
    #content {background-color:#E6E6E6;width:500px;height:500px;}
    </style>
    </head>
    <body>
    <div id="content">
    <div id="menu" style="float:right;width:100px;height:200px;background-color:#F7BE81;display:none;" onMouseOver="showMenu();" onmouseout="hiddenMenu();">菜单项 </div>
    <div id="menuBut" style="float:right;background-color:#F5F6CE; margin:0;width:20px;height:100px;padding-top:10px;padding-left:2px;" onmouseover="showMenu();"  onmouseout="hiddenMenu();">快捷菜单 </div>
    </div>
    </body>
    </html>