当前位置: 代码迷 >> Web前端 >> 鼠标事件统制div
  详细解决方案

鼠标事件统制div

热度:107   发布时间:2012-09-02 21:00:34.0
鼠标事件控制div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>鼠标事件控制div</TITLE>
</HEAD>
<BODY>
<script>

function _show(obj){
var str = "<table width=100%><tr>"
+ "<td align='center'><a href='#' style='text-decoration:none'>办事指南</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>表格下载</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上咨询</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上申请</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上查询</a></td>"
+ "</tr></table>"
var pos = GetObjPos(obj);
document.getElementById("showMessage").style.left = pos.x ;
if(pos.y + obj.offsetHeight - 5 + 100 < document.body.offsetHeight){
  document.getElementById("showMessage").style.top = pos.y + obj.offsetHeight - 5;
}else{
  document.getElementById("showMessage").style.top = pos.y - 100;
}
document.getElementById("showMessage").innerHTML = str;
document.getElementById("showMessage").style.display="block";
}
function _disshow(){
document.getElementById("showMessage").style.display="none";
}

function CPos(x, y){
    this.x = x;
    this.y = y;
}

function GetObjPos(ATarget){
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);
    var target = target.offsetParent;
    while (target){
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
        target = target.offsetParent;
    }
    return pos;
}

</script>

<style type="text/css">
#showMessage {width:400px; height:30px; background-color:white; position:absolute; z-index:4;right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}
</style>
<div id="showMessage" onmouseover="this.style.display='block';" onmouseout="this.style.display='none';">
</div>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);"  onmouseout="_disshow()">显示</a> <br>

<a href="#" style="text-decoration:none" onmouseover="_show(this,200);"  onmouseout="_disshow()">显示</a><br>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);"  onmouseout="_disshow()">显示</a><br>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);"  onmouseout="_disshow()">显示</a><br>
</BODY>
</HTML> 

  相关解决方案