鼠标移动显示层

转自csdn中一个朋友的回答答案 http://bbs.csdn.net/topics/310199485

当鼠标移动,显示出层,离开,层隐藏,直接将以下代码另存为html即可查看效果

鼠标移动显示层_第1张图片


鼠标移动显示层_第2张图片


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function over(obj,div,bol){
var rec=getoffset(obj);
    div.style.top=rec[0]+obj.offsetHeight;
    if(bol==true)
    	rec[1] -= 50;
    div.style.left=rec[1];     
    div.style.display="block";        
}
    
function out(div) {
div.style.display="none";
}

function getoffset(e) {  
var t=e.offsetTop;  
 	var l=e.offsetLeft;  
 	while(e=e.offsetParent) {  
  	 t+=e.offsetTop;  
  	 l+=e.offsetLeft;  
 	}  
var rec = new Array(1); 
 	rec[0]  = t; 
 	rec[1] = l; 
 	return rec 
}  

</script>
<BODY>
<table>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">
<span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性(详解)</a></span>
</td>
</tr>
<tr>
<div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">  
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。

    </div>
</tr>
</table>
</BODY>
</HTML>

你可能感兴趣的:(移动)