CSS製造:滑鼠移上去顯示大圖_經驗交流

來源:互聯網
上載者:User
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href='http://blog.pr1984.com' /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滑鼠移上去顯示大圖</title> <style type="text/css"> <!-- .pr { position:relative; } .pr a { border:1px solid gray; padding:3px; width:200px; height:153px; font-size:12px; text-decoration:none; background:url("no.gif"); position:absolute; left:0; top:0; z-index:2; text-indent:-9999px; } .pr a:hover { width:10px; height:362px; padding:10px 494px 0 10px; text-indent:0; background:#fff url("attachments/month_0608/o200682352117.jpg") no-repeat 35px 3px; } .pr img { border:1px solid gray; padding:3px; width:200px; position:relative; z-index:1;} .pr2 a { display:block; width:206px; } .pr2 a img { border:1px solid gray; padding:3px; width:200px; } .pr2 a:hover { border:1px solid gray; padding:3px; width:200px; height:369px; padding:3px 484px 0 3px; font-size:12px; text-decoration:none; text-indent:0; background:#fff url("attachments/month_0608/o200682352117.jpg") no-repeat 206px 3px; } .pr2 a:hover img { border:none; padding:0; } --> </style> </head> <body> 效果一 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.