我的网页中有一个隐藏的Layer控件
代码如下
#Layer {
position:absolute;
left:157px;
top:133px;
width:216px;
height:110px;
z-index:1;
visibility: hidden;
}
<div id="Layer"></div>
请问在onmouseover事件中让这个隐藏的Layer控件出现的代码
非常感谢!
代码如下
#Layer {
position:absolute;
left:157px;
top:133px;
width:216px;
height:110px;
z-index:1;
visibility: hidden;
}
<div id="Layer"></div>
请问在onmouseover事件中让这个隐藏的Layer控件出现的代码
非常感谢!
document.getElementById("Layer").display = "block";//show
<head>
<title>测试文档</title>
<style type="text/css" id="ccs1">
#Layer {
position:absolute;
left:157px;
top:133px;
width:216px;
height:110px;
z-index:1;
background-color:#123456;
visibility:hidden;
}
</style>
<script type="text/javascript">
function Area(Layer){
this.Tag=Layer;
this.StartPoint={
X:parseInt(Layer.style.left),
Y:parseInt(Layer.style.top)
}
this.EndPoint={
X:parseInt(Layer.style.left)+parseInt(Layer.style.width),
Y:parseInt(Layer.style.top)+parseInt(Layer.style.height)
}
}
Area.prototype.HitTest=function(x,y){
if(x>this.StartPoint.X && y>this.StartPoint.Y && x<this.EndPoint.X && y<this.EndPoint.Y)
{
return true;
}else
{
return false;
}
}
window.onload=function(){
var Layer=document.getElementById("Layer");
Layer.style.width=216;
Layer.style.height=110;
Layer.style.top=133;
Layer.style.left=157;
//这里必须手动设置参数,因为用css选择符的话js无法获得元素style的值
//也许可以,不过我没找到方法
var LayerArea=new Area(Layer);
document.body.onmousemove=function(evt){
evt=evt?evt:window.event;
if(LayerArea.HitTest(evt.clientX,evt.clientY)){
LayerArea.Tag.style.visibility="visible";
};
Layer.onmouseout=function(){
this.style.visibility="hidden";
}
}
}
</script>
</head>
<body>
<div id="Layer">123123123</div></body>
</html>