日期:2014-05-16 浏览次数:20401 次
<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")