<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #zt{ width:100%; height:2000px; overflow: hidden; background: yellowgreen; } #cvv{ width:400px; position: fixed; right:0; bottom:0; } .tip img { width:400px; height:280px; } #close{ background:pink; width:20px; height:20px; text-decoration:none; text-align: center; display:inline-block; position: absolute; top: 5px; right:5px; border-radius: 15px; } #top-list{ background: pink; } .hide{ display: none; } </style> <script> window.onload=function(){ var Ocon = document.getElementById("con"); var OTop = document.getElementById("top-list"); var closeBtn = document.getElementById("close"); OTop.onmouseover=function(){ OTop.style.display="block"; Ocon.className="tip"; } closeBtn.onclick=function(){ OTop.style.display="block"; Ocon.className="hide"; } } </script> </head> <body> <div id="zt"> <div id="cvv"> <div id="top-list"> <h3>我是广告</h3> <a href="javascript:;" id="close">×</a> </div> <div class="tip" id="con"> <a href="http://www.zhaocom.xyz/"><img src="img/guanggao.png" /></a> </div> </div> </div> </body> </html>
