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