鼠标指向文字链接弹出DIV层，离开文本层消失

　　鼠标指向文字链接弹出DIV层效果，大家自己运行下边的代码就可以看到效果了，当鼠标离开文本链接时，层就消失了，一种比较普遍的特效，可能对于一般的站长来说不是太实用，但是对于提高用户体验、增强网站的性能还是不错的，欢迎借鉴学习。

　　烈火代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>响应鼠标，超级链接显示、隐藏弹出层的例子</title> <style type="text/css"> body{ color:#008000; font:12px/1.5 arial; } a{ color:#0B59B2; margin:0 8px; } #box{ position:absolute; width:230px; height:60px; background:#F5F9FA; border:2px solid #95B5D5; display:none; } </style> <script type="text/javascript"> window.onload = function () { var aA = document.getElementsByTagName("a"); var oBox = document.getElementById("box"); var timer = null; var i = 0; for (; i < aA.length; i++) { aA[i].onmouseover = function () { clearTimeout(timer); var oParent = this.parentElement || this.parentNode; oBox.style.top = pageY(this) + this.offsetHeight + 5 + "px"; oBox.style.left = pageX(oParent) + "px"; oBox.style.display = "block" }; aA[i].onmouseout = oBox.onmouseout = function () { timer = setTimeout(function () { oBox.style.display = "none" }, 300) }; oBox.onmouseover = function () { clearTimeout(timer); } } }; function pageX (elem) { return elem.offsetLeft + (elem.offsetParent ? arguments.callee(elem.offsetParent) : 0) } function pageY (elem) { return elem.offsetTop + (elem.offsetParent ? arguments.callee(elem.offsetParent) : 0) } </script> </head> <body> 作者：<a href="javascript:;">swiss原子弹</a>发表日期：211-8-17 21:56:00 作者：<a href="javascript:;">烈火网</a>发表日期：211-8-17 21:56:00 作者：<a href="javascript:;">网友网友love</a>发表日期：211-8-17 21:56:00 <div id="box"></div> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

鼠标指向文字链接弹出DIV层，离开文本层消失

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

鼠标指向文字链接弹出DIV层，离开文本层消失

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性