第一步,在html里面嵌入div,并写css
<div id="showinfo"></div>
#showinfo{top:-100;width:220;heigth:30;background:#a9dbf6;border:1px solid #a3bbce;position:absolute;}
第二步,当鼠标移动到元素上时,将信息框呈现出来。
/**当鼠标移动到元素上时,将信息框呈现出来******/
function onMouseMove()
{
showInfo.innerHTML='这是一个由js控制的信息框...';
showInfo.style.left = event.clientX + document.body.scrollLeft +20;
showInfo.style.top = event.clientY + document.body.scrollTop;
}
/**当推动鼠标事件,将信息框隐藏起来*****/
function onMouseOut()
{
showInfo.style.left = -100;
showInfo.style.top = -100;
}
var text36 = document.getElementById('text36');
var showInfo = document.getElementById('showInfo');
showInfo.style.top = showInfo.top;
text36.onmousemove = onMouseMove;
text36.onmouseout = onMouseOut;