html浮层左边,鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)...

如下所示：

.toopTip

{

background-color:Yellow;

border-style:solid;

border-width:1px;

border-color:Red;

}

/*

如果希望提示的div的左边界与上边界与显示的div重叠，那么需要删除文档头W3C标准

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

*/

function initEvent() {

var divArray = document.getElementsByTagName("div");

for (var i = 0; i < divArray.length; i++) {

divArray[i].onmouseover = createDivDetailOne;

/*

无法用原始的div绑定鼠标移走的事件,因为明细的div的宽度长度都要大于原始div，

这样原始的div就被覆盖了，此时会自动触发onmouseout事件

*/

//divArray[i].onmouseout = removeDivDetail;

}

}

function createDivDetailOne() {

//保证divDetail div的唯一性

var divDetail = document.getElementById("divDetail");

if(divDetail)

{

document.body.removeChild(divDetail);

}

divObj = document.createElement("div");

divObj.className = "toopTip";

divObj.setAttribute("id", "divDetail");

divObj.style.position = "absolute";

divObj.style.width = "200px";

divObj.style.height = "100px";

var triggerObj = window.event.srcElement;

divObj.style.top = triggerObj.offsetTop;

divObj.style.left = triggerObj.offsetLeft;

divObj.innerHTML = triggerObj.innerText;

document.body.appendChild(divObj);

//此时用于明细的div已经覆盖了原div，所以覆盖的div要进行事件的处理

document.getElementById("divDetail").onmouseout = function() {

divObj = this;

if (!divObj) {

return;

}

document.body.removeChild(divObj);

};

}

function removeDivDetail() {

var divObj = document.getElementById("divDetail");

if (!divObj) {

return;

}

document.body.removeChild(divObj);

}

window.onload = initEvent;

Hello My Js World!

Welcome to My Js World!

THIS IS My Js World!