一个看似简单却很有难度的问题

有一个input和一个div，相互没有重叠，input初始时是显示的，div是隐藏的现在要实现以下需求input获得焦点时，div显示，input失去焦点，但鼠标点的不是那个div时，div隐藏，否则div不隐藏就是说，当鼠标点input，input获得焦点了，用onfocus便可实现将div显示出来。onblur可以实现将div隐藏。可是我现在要实现当onblur时，如果鼠标点的刚好是那个div，则这个div不隐藏。我给div加了onclick或onfocus，设置其为显示，但是无效。因为div还没来得及触发事件，就已经被input的onblur函数给隐藏掉了。

解决方案 »

  1.   


    <!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> Tips </title>
      <style>
      body {
    font-size: 12px;
      }
      #banner {
    width: 150px;
    height: 25px;
    border: 1px solid #009900;
    background-color: #009900;
    display: block;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
      }
      #tip {
    width: 150px;
    height: 130px;
    border: 1px solid #FFCC66;
    background-color: #FFFFCC;
    position: absolute;
    text-align: center;
      }
      </style>
     </head> <body>
      <span id="banner">banner</span>
      <div id="tip">MessageBox</div>
    <script type="text/javascript">
      <!--
      (function(){
    var $ = function(id) { return document.getElementById(id) };
    var getPos = function(e){ var ix = iy = 0; do { ix += e.offsetLeft;iy += e.offsetTop;}while(e = e.offsetParent);return {'x': ix, 'y': iy};}
    var stopBub = function(e) { e = e || window.event;if(e && e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}}
    $('banner').onmouseover = function(e){
    $('tip').style.left = getPos(this).x + 'px';
    $('tip').style.top = (getPos(this).y + this.offsetHeight) + 'px';
    $('tip').style.display = 'block';
    stopBub(e);
    }
    document.onmouseover = function(){
    $('tip').style.display = 'none';
    }
    $('tip').onmouseover = function(e) {
    stopBub(e);
    }
      })();
      //-->
      </script>
     </body>
    </html>
      

  2.   

    4L有个小的缺点，我刷新页面时，会显示MessageBox，
    应该默认display:none;