跟随鼠标悬浮层实例

<script type="text/javascript">
//在鼠标显示一个层，该层的内空为div2的内容
function showTip2(){
  var ipadTwo = document.getElementById('ipadTwo'); //将要弹出的层
  ipadTwo.innerText="修改后的文字";
  ipadTwo.style.display="block"; //div2初始状态是不可见的，设置可为可见
  //window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
  //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
  ipadTwo.style.left=event.clientX+15; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
  ipadTwo.style.top=parseInt(event.y)+5+document.body.scrollTop;
  ipadTwo.style.position="absolute"; //必须指定这个属性，否则div1层无法跟着鼠标动
}

//关闭层div2的显示
function closeTip2(){
  var ipadTwo = document.getElementById('ipadTwo');
  ipadTwo.style.display="none";
}
</script>

<style type="text/css">
#ipadTwo {
    background: #FFF;
    border: dashed 1px #dddddd;
    opacity: 0.8; //
    -moz-opacity: 0.8;
    filter: alpha(opacity = 80);
    padding: 5px;
}
</style>
<div id="ipadTwo" style="display:none;" />