html页面中很多元素会用到文本提示,当鼠标悬停之后显示一段说明文字;
/*显示说明性文字*/
function tips(id,str){
t= getTop(document.getElementById(id))-document.getElementById(id).offsetHeight;
l= getLeft(document.getElementById(id));
document.getElementById("tips").innerHTML="提示:"+str;
document.getElementById("tips").style.left=l+"px";
document.getElementById("tips").style.top=t+"px";
document.getElementById("tips").style.display="";
}
/*移除说明性文字*/
function outtips(){
document.getElementById("tips").style.display='none';
}
//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
</script>
<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc">
</div>
<br />
在需要提示的元素的onmouseover事件中调用 tips(id,str)提示说明,在onmouseout事件中调用outtips()隐藏说明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)