怎么用jquery定位一个div在某个input附近


<!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>无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
-->
</style>
</head><body>
<div id="apDiv1"></div>
<table width="200" border="0" cellspacing="1" cellpadding="3">
  <tr>
    <td><label>
      <input type="text" name="textfield" id="textfield" />
    </label></td>
    <td><input type="text" name="textfield2" id="textfield2" /></td>
  </tr>
</table>
</body>
</html>
如上所示，我想鼠标在某个Input上时，上面的div就在这个Input旁边

解决方案 »

  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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    #apDiv1 {
        border:1px solid red;
    width:100px;
    height:77px;
    text-align:center;
    padding:6px;  
    background-color:#FCC;
    position:absolute;
    z-index:99;
    display:none; /*使div初始化时隐藏*/
    }
    input {
    border:1px solid; /*注意这里的border宽度，后面要根据这个值额外增加div的left值*/
    }
    -->
    </style>
    <script type="application/javascript" src="js/jquery.js"></script>
    <script type="application/javascript">
    <!--
    //dom加载完成时执行
    $(function(){
    //input获取焦点时在其旁边显示div
    $('input').focus().click(function(){
    var input = $(this);
    var offset = input.offset();
    //先后设置div的内容、位置，最后显示出来（渐进效果）
    $('#apDiv1').text(input.attr('name'))
    .css('left',offset.left + input.width() + 2 + 'px')
    .css('top',offset.top + 'px')
    .fadeIn();
    });
    //input失去焦点时隐藏div
    $('input').blur(function(){
    $('#apDiv1').css('display','none');
    });
    });
    //-->
    </script>
    </head><body>
    <div id="apDiv1"></div>
    <table width="200" border="0" cellspacing="1" cellpadding="3">
      <tr>
        <td><input type="text" name="textfield" id="textfield" /></td>
        <td><input type="text" name="textfield2" id="textfield2" /></td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    测试时注意jquery的路径！！！重点：1、对CSS position属性的理解（static、fixed、absolute、relative）
          2、jquery中offset的用法
      

  3.   

    晕死 <script /> 标签的type属性写错了……<!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>无标题文档</title>
    <style type="text/css">
    <!--
    #apDiv1 {
        border:1px solid red;    
        width:100px;
        height:77px;
        text-align:center;
        padding:6px;  
        background-color:#FCC;
        position:absolute;
        z-index:99;
        display:none;    /*使div初始化时隐藏*/
    }
    input {
        border:1px solid;    /*注意这里的border宽度，后面要根据这个值额外增加div的left值*/
    }
    -->
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    <!--
        //dom加载完成时执行
        $(function(){
            //input获取焦点时在其旁边显示div
            $('input:text').focus().click(function(){
                var input = $(this);            
                var offset = input.offset();
                //先后设置div的内容、位置，最后显示出来（渐进效果）
                $('#apDiv1').text(input.attr('name'))
                    .css('left',offset.left + input.width() + 2 + 'px')
                    .css('top',offset.top + 'px')
                    .fadeIn();
            });
            //input失去焦点时隐藏div
            $('input:text').blur(function(){
                $('#apDiv1').css('display','none');
            });
        });
    //-->
    </script>
    </head><body>
    <div id="apDiv1"></div>
    <table width="200" border="0" cellspacing="1" cellpadding="3">
      <tr>
        <td><input type="text" name="textfield" id="textfield" /></td>
        <td><input type="text" name="textfield2" id="textfield2" /></td>
      </tr>
    </table>
    </body>
    </html>