资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
CSS/HTML教程
>>>
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" _ewebeditor_ta_src="attachments%2Fmonth_0608%2Fo200682352117.jpg" alt="big" /> <a href="#" _ewebeditor_ta_href="%23">效果一</a> </div> <div class="pr2"> <a href="#" _ewebeditor_ta_href="%23"><img src="attachments/month_0608/o200682352117.jpg" _ewebeditor_ta_src="attachments%2Fmonth_0608%2Fo200682352117.jpg" alt="效果二" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程