如下所示： 复制代码 代码如下: <BR> .toopTip<BR> {<BR> background-color:Yellow;<BR> border-style:solid;<BR> border-width:1px;<BR> border-color:Red;<BR> }<BR> <BR> /*<BR> 如果希望提示的div的左边界与上边界与显示的div重叠，那么需要删除文档头W3C标准<BR> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<BR> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><br> */<BR> function initEvent() {<BR> var divArray = document.getElementsByTagName("div");<BR> for (var i = 0; i < divArray.length; i++) {<BR> divArray[i].onmouseover = createDivDetailOne;<BR> /*<BR> 无法用原始的div绑定鼠标移走的事件,因为明细的div的宽度长度都要大于原始div，<BR> 这样原始的div就被覆盖了，此时会自动触发onmouseout事件<BR> */<BR> //divArray[i].onmouseout = removeDivDetail;<BR> }<BR> }<BR> function createDivDetailOne() {<BR> //保证divDetail div的唯一性<BR> var divDetail = document.getElementById("divDetail");<BR> if(divDetail)<BR> {<BR> document.body.removeChild(divDetail);<BR> }<BR> divObj = document.createElement("div");<BR> divObj.className = "toopTip";<BR> divObj.setAttribute("id", "divDetail");<BR> divObj.style.position = "absolute";<BR> divObj.style.width = "200px";<BR> divObj.style.height = "100px";<BR> var triggerObj = window.event.srcElement;<BR> divObj.style.top = triggerObj.offsetTop;<BR> divObj.style.left = triggerObj.offsetLeft;<BR> divObj.innerHTML = triggerObj.innerText;<BR> document.body.appendChild(divObj);<BR> //此时用于明细的div已经覆盖了原div，所以覆盖的div要进行事件的处理<BR> document.getElementById("divDetail").onmouseout = function() {<BR> divObj = this;<BR> if (!divObj) {<BR> return;<BR> }<BR> document.body.removeChild(divObj);<BR> };<BR> }<BR> function removeDivDetail() {<BR> var divObj = document.getElementById("divDetail");<BR> if (!divObj) {<BR> return;<BR> }<BR> document.body.removeChild(divObj);<BR> } <P><BR> window.onload = initEvent;<BR> Hello My Js World! Welcome to My Js World! THIS IS My Js World!
