这只是个学习原生javascript过程中的一个练手效果 不做说明解释 直接上代码 算是个参考
<!doctype html> <html> <head> <meta charset="utf-8"> <title>关键字title提示</title> <style> *{padding:0;margin:0;} #test{width:700px; margin:50px auto 0; line-height:26px; font-size:14px;} p { text-indent:2em; position:relative;} .hint { color:#3CF;} #popHint { border:1px solid #F60; position:absolute; padding:0 4px; background:white; border-radius:2px;} </style> <script> window.onload = function() { var oTest = document.getElementById('test'); var oHint = getClassName(document, '*', 'hint'); hint(oHint, 'popHint'); function hint(arrHint, popHintId) { for(var i=0; i<arrHint.length; i++) { arrHint[i].onmouseover = function() { var popHint = document.createElement('div'); popHint.id = popHintId; popHint.innerHTML = this.innerHTML; var p = getPos(this); popHint.style.position = 'absolute'; popHint.style.left = p.left + 'px'; popHint.style.top = p.top + this.offsetHeight + 'px'; document.body.appendChild(popHint); } arrHint[i].onmouseout = function() { document.body.removeChild(popHint); } } } function getClassName(obj, tagName, className){ var ele=obj.getElementsByTagName(tagName); var result=[],aClassName=className.split(',').join('|'); var re=new RegExp('((^|\s+)('+aClassName+')(\s+|$))'); for(var i=0;i<ele.length;i++){ if(re.test(ele[i].className)){ result.push(ele[i]); } } return result; } function getPos(obj) { var pos = {left:0,top:0}; while(obj) { pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent; } return pos; } } </script> </head> <body> <div id="test"> <p><span class="hint">JavaScript</span>一种直译式<span class="hint">脚本语言</span>，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为<span class="hint">JavaScript</span>引擎，为浏览器的一部分，广泛用于客户端的<span class="hint">脚本语言</span>，最早是在<span class="hint">HTML</span>（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p> <p>在1995年时，由<span class="hint">Netscape</span>公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为<span class="hint">Netscape</span>与<span class="hint">Sun</span>合作，<span class="hint">Netscape</span>管理层希望它外观看起来像<span class="hint">Java</span>，因此取名为<span class="hint">JavaScript</span>。但实际上它的语法风格与Self及Scheme较为接近。</p> </div> </body> </html>