动态创建Div层

Question

下面是个表格
编号   姓名 
2    ws_hgo2
3    ws_hgo3
4    ws_hgo4
当我的鼠标划到ws_hgo2的时候
在ws_hgo2上面就有个Div层,里面有图片,描述等信息
鼠标离开的时候,Div层消失同理鼠标划到ws_hgo3,ws_hgo4一样！ 

Answer 1

<style>
#otbl {
border: 1px solid #8F8F8F;
border-collapse: collapse;
}
#otbl td {
border: 1px solid #8F8F8F;
width: 60px;
height: 30px;
}
#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
    var e = e || window.event;
    try{
        e.cancelBubble = true;
    }catch(ex){
        try{
            e.stopPropagation();
        }catch(e){}
    }
 } var getTarget = function(e){
    return e.srcElement || e.target;
 } var absPosition = function(element){
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft, 'y': iTop};
 }
 function showTip(e, obj){
        CancelBubble(e);
        var e = e || window.event
        var otarget = getTarget(e);
        $("odiv").style.display = "block";        with($("odiv").style){
            display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
        }
$("odiv").innerHTML = obj.innerText || obj.textContent;
        document.onmouseover = function(){
            $("odiv").style.display = "none";
            document.onmouseover = null;
        }
        $("odiv").onmouseover = function(e){
            var e = e || window.event;
            CancelBubble(e);
        } }
//-->
</script><table id="otbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td onmouseover="showTip(event, this)">ws_hgo2 </td>
</tr>
<tr>
<td>3</td>
<td onmouseover="showTip(event, this)">ws_hgo3</td>
</tr>
<tr>
<td>4</td>
<td onmouseover="showTip(event, this)">ws_hgo4</td>
</tr>
</tbody>
</table><div id="odiv"></div>

Answer 2

感谢1楼兄弟写的代码
我的Div层是在鼠标划过的地方上面显示Div而不是右边

Answer 3

更改一下位置就行了，借用1楼代码（未判断边界）
<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
    var e = e || window.event;
    try{
        e.cancelBubble = true;
    }catch(ex){
        try{
            e.stopPropagation();
        }catch(e){}
    }
 } var getTarget = function(e){
    return e.srcElement || e.target;
 } var absPosition = function(element){
  var el = element;
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft - $("odiv").offsetWidth/2 - el.offsetWidth/2, 'y': iTop - $("odiv").offsetHeight};
 }
 function showTip(e, obj){
        CancelBubble(e);
        var e = e || window.event
        var otarget = getTarget(e);
        $("odiv").style.display = "block";        with($("odiv").style){
            display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
        }
        $("odiv").innerHTML = obj.innerText || obj.textContent;
        document.onmouseover = function(){
            $("odiv").style.display = "none";
            document.onmouseover = null;
        }
        $("odiv").onmouseover = function(e){
            var e = e || window.event;
            CancelBubble(e);
        } }
//-->
</script>
<br/><br/><br/><br/><br/><br/>
<table id="otbl" align="center">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td onmouseover="showTip(event, this)">ws_hgo2 </td>
        </tr>
        <tr>
            <td>3</td>
            <td onmouseover="showTip(event, this)">ws_hgo3</td>
        </tr>
        <tr>
            <td>4</td>
            <td onmouseover="showTip(event, this)">ws_hgo4</td>
        </tr>
    </tbody>
</table><div id="odiv"></div>

Answer 4

谢谢7楼的代码
还是有问题
当我鼠标离开的时候Div层并没有消失

Answer 5

我的那个值根据鼠标滑过去的值传给后台
根据值获取信息返回给
Div的innerHTML但是上面
我测试了的达不到相应的效果
感觉写复杂啦

Answer 6

   
    function showTip(oEvent){
    var oDiv = document.getElementById("divTip1");
    oDiv.style.visibility="visible";
    oDiv.style.left = oEvent.clientX-25;
    oDiv.style.top =oEvent.clientY-35;
    }
    function hideTip(oEvent){
     var oDiv = document.getElementById("divTip1");
     oDiv.style.visibility = "hidden";
     }     }
<body>
<p>Move your mouse over the red square. </p>
<div id="div1"
      style="background-color:Red;height:50px;width:50px"
      onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
 <div id="divTip1"
       style="background:yellow; position:absolute; visibility:hidden; padding: 5px">
       <span style="font-weight:bold">Custom Tooltip</span><br /></div>
</body>
divTip1里面内容自己动态绑定。这个是书上的例子，看下合适你的需求吗

Answer 7

<script language=javascript>
 function f_creatediv(divcnt){
  for(var i=0;i<divcnt;i++){
   var objdiv = document.createElement("DIV");
   var objname="shop_" + i
   objdiv.id = objname;
   objdiv.style.top = 100 * i + 100;
   objdiv.style.left = 100 * i + 100;
   objdiv.style.background = '#FFFF00';
   objdiv.style.visibility = 'visible';
   objdiv.style.width = 100;
   objdiv.style.height = 80;
   objdiv.style.border = "5 groove black";
   objdiv.innerHTML="SHOP_" + i;
   document.body.appendChild(objdiv);
   document.getElementById(objname).onmouseover = function()
   {
     alert(this.id);
   };
  }
 }
</script>
<input type="button" onclick="f_creatediv(4)">