點擊按鈕彈出背景半透明圓角層效果(點擊彈出隱藏層)

時間 2020-06-22

標籤點擊按鈕彈出背景半透明圓角效果隱藏简体版

原文原文鏈接

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> #left1{width:500px;height:300px;margin:0 auto;border:1px solid #f60;overflow:hidden;padding-top:100px;} #left2{width:80px;height:80px;background:#f00;cursor:pointer;} #opo{position:absolute;top:100px;left:200px;z-index:999;width:381px;height:auto;display:none;} .border_top{width:381px;height:4px;float:left;background:url(images/border-top.jpg) no-repeat;} .border_bottom{width:381px;height:4px;float:left;background:url(images/border-bottom.jpg) no-repeat;} .opocont{float:left;width:362px;width:369px\9;height:134px;border:3px solid #e0cb9d;border-top:none;border-bottom:none;padding:25px 0 0 13px;padding:18px 0 0 7px\9;background:#fcf1d8;filter:alpha(opacity=50); opacity:0.5;/*FF*/_margin-top:-20px;} .opocont a img{width:80px;height:18px;border:1px solid #cecece;margin-bottom:7px;} </style> <script type="text/javascript"> function showDiv(){ document.getElementById('opo').style.display='block'; } function hiddenDiv(){ document.getElementById('opo').style.display='none'; } </script> </head> <body> <div id="left1"> <a href="javascript:showDiv()" >點擊確認</a> </div> <div id="opo" onmouseover="showDiv();" onmouseout="hiddenDiv();"> <div class="border_top"></div> <div class="opocont"> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> <a href="#"><img src="images/opoimg.jpg" alt="工商銀行" /></a> </div> <div class="border_bottom"></div> </div> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。