PHP基础
PHP教程
php框架
JavaScript
asp.net
AJAX
正则表达式
ASP
输入
banner图
图片脚本
导航/分类
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("http://img.gxlcms.com/http://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-27-201927/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("http://img.gxlcms.com/http://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-27-201927/o200682352117.jpg") no-repeat 206px 3px; } .pr2 a:hover img { border:none; padding:0; } --> </style> </head> <body> <div class="pr"> <img src="http://img.gxlcms.com/http://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-27-201927/o200682352117.jpg" alt="big" /> 效果一 </div> <div class="pr2"> <img src="http://img.gxlcms.com/http://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-27-201927/o200682352117.jpg" alt="效果二" /> </div> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
