鼠标触发弹出层，移出隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标触发弹出层，移出隐藏！</title>
<head>
<style type="text/css">
dl,dt,dd{margin:0;padding:0;}
#menu{cursor:pointer;height:30px;width:200px;border:1px solid #ccc;background:#dedede;font-size:12px;}
#menu dt a{line-height:30px;text-align:center;display:block;color:#333;text-decoration:none;}
#menu dt a:hover{color:#C00;text-decoration:underline;}
#menu2{display:none;position:absolute;width:200px;border:1px solid #ccc;background:#f1f1f1;margin-left:-1px;}
#menu2 a{display:block;height:25px;text-align:center;line-height:25px;background:url(../images/icon01.png) no-repeat 7px 8px;border-bottom:#B4C9C6 1px dashed;color:#191919;}
#menu2 a:hover{color:#F00;text-decoration:underline;background:#0067A3;color:#FFF;}
</style>
<script type="text/javascript">
function handleScroll(){
document.getElementById("menu").style.top = (document.body.offsetHeight*0.87 + document.body.scrollTop) +"px";
}
function pop(){
var toogle = document.getElementById("menu2");
if(toogle.style.display == "" || toogle.style.display == "none"){
toogle.style.display = "block";
}else{
toogle.style.display = "none";
}
}
function init(){
document.body.onscroll="handleScroll()";
document.body.onload="handleScroll()";
document.getElementById("menu").onmouseover=pop;
document.getElementById("menu").onmouseout=pop;
}
window.onload=init;
</script>
</head>
<body>
<div id="menu">
<dl>
<dt><a href="#">鼠标触发弹出层，移出隐藏！</a></dt>
<dd id="menu2">
<a href="#">弹出层</a>
<a href="#">弹出层</a>
<a href="#">弹出层</a>
<a href="#">弹出层</a>
</dd>
</dl>
</div>
</body>
</html>
标签：JavaScript
你的评论
