鼠标移动弹出 隐藏 层问题 求高手指点

用onmousemove，onmouseout 实现了一个 鼠标移上去显示层，离开隐藏层的效果但是鼠标移动过去的时候  那个显示出来的层一直晃。。一直闪烁 要指在中正心才会正常 求如何解决 ！

解决方案 »

  1.   

    function show(divName)
     {
      //var event=window.event||arguments.callee.caller.arguments[0];
      //如果window.event==null，则取函数的第一个参数...
       
      //var event=window.event||event;
      //var event=event||window.event;
       document.getElementById(divName).style.display="";
      //设置div2的style属性的display值等于空，显示
      // alert(window.screen.width);
      // document.getElementById(divName).style.left=event.clientX+"px";
      
      //window.screen.width;
      if (window.screen.width-(document.documentElement.scrollLeft+event.clientX)<300)
      {
       document.getElementById(divName).style.left=document.documentElement.scrollLeft+event.clientX-300+"px";
      }
      else
      {
       document.getElementById(divName).style.left=document.documentElement.scrollLeft+event.clientX+"px";
      }
      //设置div2的style属性的left的值为正文区域的X坐标值+单位px
      // document.getElementById(divName).style.top=event.clientY+"px";
      document.getElementById(divName).style.top=document.documentElement.scrollTop+event.clientY+"px";
      //设置div2的style属性的right的值为正文区域的Y坐标值+单位px
     }
     function hidden(divName)
     {
      document.getElementById(divName).style.display="none";
      //设置div2的style属性的display的值为空，隐藏
     }
     
     function show_div2(divName)
     {
      document.getElementById(divName).style.display="";
     }
     function hidden_div2(divName)
     {
      document.getElementById(divName).style.display="none";
      //设置div2的style属性的display的值为空，隐藏
     }
      

  2.   

    DEMO
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LIGHTBOX EXAMPLE</title>
    <style>
    * {
    margin:0;
    padding:0
    }
    html, body {
    height: 100%;
    width: 100%;
    font-size:12px
    }
    .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    padding: 6px 16px;
    border: 12px solid #D6E9F1;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }
    .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color:#000;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .close {
    float:right;
    clear:both;
    width:100%;
    text-align:right;
    margin:0 0 6px 0
    }
    .close a {
    color:#333;
    text-decoration:none;
    font-size:14px;
    font-weight:700
    }
    .con {
    text-indent:1.5pc;
    line-height:21px
    }
    </style>
    <script>
    function show(tag){
    var light=document.getElementById(tag);
    var fade=document.getElementById(''fade'');
    light.style.display=''block'';
    fade.style.display=''block'';
    }
    function hide(tag){
    var light=document.getElementById(tag);
    var fade=document.getElementById(''fade'');
    light.style.display=''none'';
    fade.style.display=''none'';
    }
    </script>
    </head>
    <body>
    <a href="javascript:void(0)" onclick="show(''light'')">打开1</a>
    <a href="javascript:void(0)" onclick="show(''light2'')">打开2</a>
    <div id="light" class="white_content">
    <div class="close"><a href="javascript:void(0)" onclick="hide(''light'')"> 关闭</a></div>
    <div class="con"> 
    内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 
    </div>
    </div>
    <div id="light2" class="white_content">
    <div class="close"><a href="javascript:void(0)" onclick="hide(''light2'')"> 关闭</a></div>
    <div class="con"> 
    内容2 
    </div>
    </div>
    <div id="fade" class="black_overlay"></div>
    </body>
    </html>