首页 > 网络编程 > CSS/HTML > 经验交流 > CSS制造：鼠标移上去显示大图 2006-12-11 00:00:00 作者： CSS制造：鼠标移上去显示大图 <!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> <div class="pr"> <img src="attachments/month_0608/o200682352117.jpg" alt="big" /> <a href="#">效果一</a> </div> <div class="pr2"> <a href="#"><img src="attachments/month_0608/o200682352117.jpg" alt="效果二" /></a> </div> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
