<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body { margin: 0; padding: 0; } p { 600px; position: fixed; bottom: 5px; } span[title]{ color: green; position: relative; } span { color: red; } span.title { color: black; position: absolute; line-height: 26px; padding: 0 5px; background: #FFFFCA; border: 1px solid #000; z-index: 1; white-space: nowrap; top: 18px; left: 0; position: absolute; display: none; } </style> <script type="text/javascript"> 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> <script type="text/javascript"> window.onload = function () { var op = document.getElementsByTagName('p')[0]; var aspan = document.getElementsByTagName('span'); op.style.left = (document.documentElement.clientWidth - op.offsetWidth)/2 + 'px'; window.onreset = function () { op.style.left = (document.documentElement.clientWidth - op.offsetWidth )/2 + 'px'; }; for( var i = 0 ; i < aspan.length; i++ ) { if(aspan[i].getAttribute('title')) { var otip = document.createElement('span'); otip.className = 'title'; otip.innerHTML = aspan[i].title; aspan[i].appendChild(otip); aspan[i].onmouseover = function () { this.children[0].style.display = 'block'; if(getPos(aspan[i].children[0]).top + 26 > document.documentElement.clientLeft + document.body.scrollHeight) { this.children[0].style.top = '-30px'; } }; aspan[i].onmouseout = function () { this.children[0].style.display = 'none'; }; } } var str = aspan[0].children[0].innerHTML; aspan[0].children[0].innerHTML = str.split('JavaScript').join('<span style = "color:red;font-weight:bold;">JavaScript</span>') }; </script> </head> <body> <p> <span title="JavaScript是一门很热门的语言">JavaScript</span>是面向Web的编程语言，绝大多数现代网站都使用了<span title="JavaScript">JavaScript</span>，并且所有的现代<span title="Web">Web</span>浏览器——基于<span>桌面系统</span>、游戏机、平板电脑和智能手机的浏览器——均包含了<span title="JavaScript">JavaScript</span>解释器。这使得<span title="JavaScript">JavaScript</span>能够称得上史上最广泛的编程语言。<span title="JavaScript">JavaScript</span>也是前端开发工程师必须掌握的三种技能之一，描述网页内容的<span title="HTML">HTML</span>、描述网页样式的<span title="CSS">CSS</span>以及描述网页行为的<span title="JavaScript">JavaScript</span>。 </p> </body> </html>