javaScript 悬停浮动层定位

如何实现当鼠标悬停控件上时，出现该控件的尾部显示对应的层，鼠标移动到该层上进行相应的操作，当鼠标移除时（不在控件上也不在层上）层隐藏，

解决方案 »

  1.   

    http://topic.csdn.net/u/20090830/23/5e5ded07-7216-46c2-9712-9f530453d60d.html?seed=11612516&r=59441993#r_59441993
    参考下我一楼回复
      

  2.   

    利用onmouseover onmouseout事件，调用一个层 ，在层上添加你想要的东西 ，按照这个思路做就行了
      

  3.   

    这是我的部分代码需要注意的时<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript">
    //省份城市控件
    function displayCity(cityName)
    {
    switch(cityName)
    {
      case"北京市":
    document.getElementById("divCityname").innerHTML="<table  align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox' name='checkbox' value='海淀区'>海淀区</td><td><input type='checkbox' name='checkbox' value='朝阳区'>朝阳区</td></tr><tr><td><input type='checkbox' name='checkbox' value='大兴区'>大兴区</td><td><input type='checkbox' name='checkbox' value='东城区'>东城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='昌平区'>昌平区</td><td><input type='checkbox' name='checkbox' value='西城区'>西城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宣武区'>宣武区</td><td><input type='checkbox' name='checkbox' value='丰台区'>丰台区</td></tr><tr><td><input type='checkbox' name='checkbox' value='房山区'>房山区</td><td><input type='checkbox' name='checkbox' value='通州区'>通州区</td></tr><tr><td><input type='checkbox' name='checkbox' value='石景山区'>石景山区</td><td><input type='checkbox' name='checkbox' value='顺义区'>顺义区</td></tr><tr><td><input type='checkbox' name='checkbox' value='近郊'>近郊</td><td>&nbsp;</td></tr></table>";
    document.getElementById("divCityname").style.left=document.getElementById("chkbeijin").style.pixelLeft; //出现问题的地方 (打算获得控件的位置)
    document.getElementById("divCityname").style.top = document.getElementById("chkbeijin").style.pixelTop;
    document.getElementById("divCityname").style.display= "block";
    break;
    case "上海市":
    document.getElementById("divCityname").innerHTML="<table align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox'name='checkbox' value='黄浦区'>黄浦区</td><td><input type='checkbox' name='checkbox' value='卢湾区'>卢湾区</td><td><input type='checkbox' name='checkbox' value='徐汇区'>徐汇区</td></tr><tr><td><input type='checkbox' name='checkbox' value='长宁区'>长宁区</td><td><input type='checkbox' name='checkbox' value='普陀区'>普陀区</td><td><input type='checkbox' name='checkbox' value='闸北区'>闸北区</td></tr><tr><td><input type='checkbox' name='checkbox' value='虹口区'>虹口区</td><td><input type='checkbox' name='checkbox' value='杨浦区'>杨浦区</td><td><input type='checkbox' name='checkbox' value='浦东新区'>浦东新区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宝山区'>宝山区</td><td><input type='checkbox' name='checkbox' value='嘉定区'>嘉定区</td><td><input type='checkbox' name='checkbox' value='松江区'>松江区</td></tr><tr><td><input type='checkbox' name='checkbox' value='闵行区'>闵行区</td><td><input type='checkbox' name='checkbox' value='近郊区'>近郊区</td><td>&nbsp;</td></tr></table>";
    document.getElementById("divCityname").style.left=event.clientX; //获取鼠标的坐标位置赋值给DIV层，（可鼠标就移动不到控件上了）
    document.getElementById("divCityname").style.top=event.clientY;
    document.getElementById("divCityname").style.display= "block";
    break;
    }
    }//隐藏城市
    function hiddenCity()
    {
    document.getElementById("divCityname").style.display="none";
    }
    </script><!--css样式-->
    <style type="text/css">
    <!--
    #divCityname { position:absolute;
    overflow: auto;
    }-->
    </style>
    </head>
    <body onLoad="hiddenCity()">
    <div id="divCityname" title="城市选择" style=" background-color:#FFDFFF; border-width:1px; border-style:solid; border-color:#0000FF; font-size:12px;"></div>
    <table width="189" height="62" align="center" cellpadding="0" cellspacing="0">
      
      <tr>
        <td height="29" colspan="7" bgcolor="#CCFFFF">&nbsp;&nbsp;<span class="STYLE11">直辖市</span> </td>
      </tr>
      <tr>
        <td width="254" align="right" class="STYLE12" id="chkbeijin"
      onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF', displayCity('北京市')"
      onMouseOut="this.style.backgroundColor='',this.style.color='',hiddenCity()">
      <input type="checkbox" name="checkbox" value="北京" >
    北京</td>
        <td width="321" class="STYLE12" 
      onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF',displayCity('上海市')" 
      onMouseOut="this.style.backgroundColor='',this.style.color='', hiddenCity()"><label>
          <input type="checkbox" name="checkbox4" value="checkbox" >
        上海</label></td>
      </tr>
    </table>
    </body>
    </html>
    调试的时候：坐标和宽度高度全不填。
      

  4.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript">
    //省份城市控件
    function displayCity(cityName)
    {
    switch(cityName)
    {
      case"北京市":
            document.getElementById("divCityname").innerHTML="<table  align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox' name='checkbox' value='海淀区'>海淀区</td><td><input type='checkbox' name='checkbox' value='朝阳区'>朝阳区</td></tr><tr><td><input type='checkbox' name='checkbox' value='大兴区'>大兴区</td><td><input type='checkbox' name='checkbox' value='东城区'>东城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='昌平区'>昌平区</td><td><input type='checkbox' name='checkbox' value='西城区'>西城区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宣武区'>宣武区</td><td><input type='checkbox' name='checkbox' value='丰台区'>丰台区</td></tr><tr><td><input type='checkbox' name='checkbox' value='房山区'>房山区</td><td><input type='checkbox' name='checkbox' value='通州区'>通州区</td></tr><tr><td><input type='checkbox' name='checkbox' value='石景山区'>石景山区</td><td><input type='checkbox' name='checkbox' value='顺义区'>顺义区</td></tr><tr><td><input type='checkbox' name='checkbox' value='近郊'>近郊</td><td>&nbsp;</td></tr></table>";
        document.getElementById("divCityname").style.left=document.getElementById("chkbeijin").style.pixelLeft; //出现问题的地方 (打算获得控件的位置)
        document.getElementById("divCityname").style.top = document.getElementById("chkbeijin").style.pixelTop;
            document.getElementById("divCityname").style.display= "block";
            break;
    case "上海市":
            document.getElementById("divCityname").innerHTML="<table align='center' cellpadding='0' cellspacing='0'><tr><td><input type='checkbox'name='checkbox' value='黄浦区'>黄浦区</td><td><input type='checkbox' name='checkbox' value='卢湾区'>卢湾区</td><td><input type='checkbox' name='checkbox' value='徐汇区'>徐汇区</td></tr><tr><td><input type='checkbox' name='checkbox' value='长宁区'>长宁区</td><td><input type='checkbox' name='checkbox' value='普陀区'>普陀区</td><td><input type='checkbox' name='checkbox' value='闸北区'>闸北区</td></tr><tr><td><input type='checkbox' name='checkbox' value='虹口区'>虹口区</td><td><input type='checkbox' name='checkbox' value='杨浦区'>杨浦区</td><td><input type='checkbox' name='checkbox' value='浦东新区'>浦东新区</td></tr><tr><td><input type='checkbox' name='checkbox' value='宝山区'>宝山区</td><td><input type='checkbox' name='checkbox' value='嘉定区'>嘉定区</td><td><input type='checkbox' name='checkbox' value='松江区'>松江区</td></tr><tr><td><input type='checkbox' name='checkbox' value='闵行区'>闵行区</td><td><input type='checkbox' name='checkbox' value='近郊区'>近郊区</td><td>&nbsp;</td></tr></table>";
            document.getElementById("divCityname").style.left=event.clientX; //获取鼠标的坐标位置赋值给DIV层，（可鼠标就移动不到控件上了）
        document.getElementById("divCityname").style.top=event.clientY;
            document.getElementById("divCityname").style.display= "block";
            break;
    }
    }//隐藏城市
    function hiddenCity()
    {
        document.getElementById("divCityname").style.display="none";
    }
    </script><!--css样式-->
    <style type="text/css">
    <!--
    #divCityname {    position:absolute;
        overflow: auto;
    }-->
    </style>
    </head>
    <body onLoad="hiddenCity()">
    <div id="divCityname" title="城市选择" style=" background-color:#FFDFFF; border-width:1px; border-style:solid; border-color:#0000FF; font-size:12px;"></div>
    <table width="189" height="62" align="center" cellpadding="0" cellspacing="0">
      
      <tr>
        <td height="29" colspan="7" bgcolor="#CCFFFF">&nbsp;&nbsp;<span class="STYLE11">直辖市</span> </td>
      </tr>
      <tr>
        <td width="254" align="right" class="STYLE12" id="chkbeijin"
                      onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF', displayCity('北京市')"
                      onMouseOut="this.style.backgroundColor='',this.style.color='',hiddenCity()">
          <input type="checkbox" name="checkbox" value="北京" >
    北京</td>
        <td width="321" class="STYLE12" 
                      onMouseOver="this.style.backgroundColor='#FF3FFF',this.style.color='#FFFFFF',displayCity('上海市')" 
                      onMouseOut="this.style.backgroundColor='',this.style.color='', hiddenCity()"><label>
          <input type="checkbox" name="checkbox4" value="checkbox" >
        上海</label></td>
      </tr>
    </table>
    </body>
    </html>这是我的问题代码：