纯css实现鼠标放上去图片在原地放大的效果,不是错位放大,也不是浮出来,就是图片上面放大,比较实用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯css鼠标放上去图片变大</title> <style type="text/css"> ul#xiaoyaxiao_com{ list-style-type: none; margin: 50px; float: left; display: inline; clear: both; } ul#xiaoyaxiao_com li{ float: left; display: inline; width:64px; height: 64px; margin: 2px; } ul#xiaoyaxiao_com li a { display: block;width:64px; height: 64px; } ul#xiaoyaxiao_com li a img{ border:1px #666 solid; width:100%; height:100%; } ul#xiaoyaxiao_com li a:hover{ z-index:100; margin: -32px 0 0 -32px; position: absolute; } ul#xiaoyaxiao_com li a:hover img{ width:128px; height:128px; border:1px red solid; } </style> </head> <body>纯css鼠标放上去图片变大 <ul id="xiaoyaxiao_com"> <li><a href='http://www.zhaoxi.net/make/10235/'><img width='100' height='100' src='http://www.zhaoxi.net/images/mymake/2014/4/201404191121112115.gif'/></a></li> <li><a href='http://www.zhaoxi.net/make/10214/'><img width='100' height='100' src='http://www.zhaoxi.net/images/mymake/2014/4/201404162142214244.gif'/></a></li> <li><a href='http://www.zhaoxi.net/make/5743/'><img width='100' height='100' src='http://www.zhaoxi.net/images/mymake/2012/6/2012060621563710435.gif'/></a></li> </ul> </body> </html>
上一个:在php里面什么时候使用is_file和file_exists以及is_dir下一个:Column count doesn t match value count at row 1 解决办法