关注前端开发
HTML5、CSS3、Javascript

鼠标触发弹出层,移出隐藏!(兼容主流)

<!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/javas

cript”>

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>

转载请注明出处大前端 » 鼠标触发弹出层,移出隐藏!(兼容主流)

分享: