鼠标移入显示，移出隐藏动态网页实现

来源：互联网发布：创作漫画的软件编辑：程序博客网时间：2024/05/17 22:47

网上购物或者其他网页中漂浮隐藏动态实现

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

<!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title></title> <styletype="text/css"> #div1 { width:200px ; height:50px ; background:red ;} #div2 { width:200px ; height:200px ; background:green ; display: none;} </style> <scripttype="text/javascript"> //移入事件 function ch1(){ document.getElementById("div2").style.display="block"; } //移出事件 function ch2(){ document.getElementById("div2").style.display="none"; } </script> </head> <body> <divid="div1"onmouseover="ch1()"onmouseout="ch2()"> 移入显示div2 </div> <divid="div2"> 我就是div2 </div> </body> </html>

阅读全文

0 0