如何使一个div层显示在鼠标当前位置的右下方？急！

本文转载自 hevil 查看原文 2003/01/07 10 div/ 显示/ 鼠标/ 如何/ 位置

我有一个动态生成的div,想让它自动显示在当前鼠标位置的右下方，但实际显示
的总是在新的一行的开头位置,应该怎么改？
<html>
<head>
<script language="JavaScript">
function hover(theObj)
  {
    getDetail();/*动态填充div*/
   if(typeof(document.all.apploc)!=undefined)
    {
     document.all.apploc.style.display = "block";       document.all.apploc.left=event.clientXevent.offsetX+theObj.offsetWidth/2;     document.all.apploc.top=event.clientYevent.offsetY+theObj.offsetHeight;

    }
  }

function getDetail()
  {
       .
       .          /*略掉读取数据的代码*/
       .
      var divnode = document.createElement("<div>");
        var newtbl = document.createElement("<table  border='1' width='100%' cellspacing='0' cellpadding='3'>");
        len =seqs.length;
        for(var i=0;i<len;i++)
          {
            var newTR = document.createElement("<tr>");
            var newTD1 = document.createElement("<td width='20%'>");
            newTD1.innerText = seqs(i).text;
            newTR.appendChild(newTD1);

            var newTD2 = document.createElement("<td width='20%'>");
            newTD2.innerText = class(i).text;
            newTR.appendChild(newTD2);

            var newTD3 = document.createElement("<td width='30%'>");
            newTD3.innerText = names(i).text;
            newTR.appendChild(newTD3);

            newtbl.appendChild(newTR);
         }
         divnode.appendChild(newtbl);
         document.all.apploc.innerHTML=divnode.innerHTML;
      }
</script>
</head>
<body>
<table width="100%" name='tbl'>
<tr class="title" align="center">
  <td width="20%">Name</td>
  <td width="50%" onmouseover='hover(this)'>Desc</td>
  <td width="30%" onmouseover='hover(this)'>Seq</td>
</tr>
</table>
<div id="apploc" style="position:absolute ;width:'200px' ; height:'100px' ;overflow:'auto'; display:none;backgroundColor:red">
</div>
</body>
</html>

8 个解决方案

#1

利用onmousemove事件，在其发生时令你的div的style.left=event.x；style.top=event.y

#2

#3

onmousemove="div1.style.top=event.clientY+15;div1.style.left=event.clientX+15;"

#4

谢谢各位了，但这种效果不是我想要的，我是想只有当鼠标移到某一行上才
会出现div，且div位置应在鼠标右下方，或是在这一行上某个固定位置，两种
都行。

#5

#6

赞成net_lover(孟子E章) 的

#7

之前不是给出了思路，修改一下也就行了

#8

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

猜您在找

点击弹出一个div并显示在鼠标右下方在git上拉取代码之后如何在idea右下方显示当前操作分支急！今天登陆学校的客户端，显示没有可用的网卡。但是在任务栏右下方有显示，请问什么问题！在屏幕右下方显示提示信息（winform窗体）（借鉴） mplayer打开视频文件后只在屏幕右下方出现一个音频播放器，而显示视频画面的那个界面不见了。