用浮动层显示html标签的title信息

最新推荐文章于 2023-07-23 21:47:25 发布

最新推荐文章于 2023-07-23 21:47:25 发布 · 408 阅读

文章标签：

33 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的鼠标悬停显示提示信息的效果，可以将原本静态的提示文字转换为动态显示的浮动层，并附带了完整的代码示例。

代码

<body>
<img width=100 src="timelogo.gif" title="图片信息" ><p>
<a href="###" title="文字信息，深灰背景色，黄色文字">文字链接</a><p>
<input type="text" name="n" id="n" size="20px" title="文本框"/>
<div style="visibility:hidden;border:0px solid #000000;background-color:#555555;font-size:12px;color:yellow;position:absolute;" id=titlelayer></div>
<script>
document.body.onmousemove=quicktitle;
document.body.onmouseover=gettitle;
document.body.onmouseout=restoretitle;
var temptitle='';
function gettitle() {
if(event.srcElement.title && (event.srcElement.title!='' || (event.srcElement.title=='' && temptitle!=''))) {
titlelayer.style.left=event.x;
titlelayer.style.top=event.y+20;
titlelayer.style.visibility='visible';
temptitle=event.srcElement.title;
event.srcElement.title='';
titlelayer.innerText=temptitle;
}
}
function quicktitle() {
if(titlelayer.style.visibility=='visible') {
titlelayer.style.left=event.x+document.body.scrollLeft;
titlelayer.style.top=event.y+20+document.body.scrollTop;
}
}
function restoretitle() {
event.srcElement.title=temptitle;
temptitle='';
titlelayer.style.visibility='hidden';
}
</script>
</body>