网上购物或者其他网页中漂浮隐藏动态实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 { width:200px ; height:50px ; background:red ;}
#div2 { width:200px ; height:200px ; background:green ; display: none;}
</style>
<script type="text/javascript">
//移入事件
function ch1(){
document.getElementById("div2").style.display="block";
}
//移出事件
function ch2(){
document.getElementById("div2").style.display="none";
}
</script>
</head>
<body>
<div id="div1" οnmοuseοver="ch1()" οnmοuseοut="ch2()">
移入显示div2
</div>
<div id="div2">
我就是div2
</div>
</body>
</html>
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| #div1 { width:200px ; height:50px ; background:red ;} | |
| #div2 { width:200px ; height:200px ; background:green ; display: none;} | |
| </style> | |
| <script type="text/javascript"> | |
| //移入事件 | |
| function ch1(){ | |
| document.getElementById("div2").style.display="block"; | |
| } | |
| //移出事件 | |
| function ch2(){ | |
| document.getElementById("div2").style.display="none"; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="div1" onmouseover="ch1()" onmouseout="ch2()"> | |
| 移入显示div2 | |
| </div> | |
| <div id="div2"> | |
| 我就是div2 | |
| </div> | |
| </body> | |
| </html> | |
扫一扫
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
