动态创建Div层
下面是个表格
编号 姓名
2 ws_hgo2
3 ws_hgo3
4 ws_hgo4
当我的鼠标划到ws_hgo2的时候
在ws_hgo2上面就有个Div层,里面有图片,描述等信息
鼠标离开的时候,Div层消失
同理鼠标划到ws_hgo3,ws_hgo4一样！
[解决办法]
<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>
[解决办法]
更改一下位置就行了，借用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>
[解决办法]
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"; } }