CSS实现鼠标移动图片放大效果

发布时间：2010-08-12 来源：

现在在含有图片较多的页面上，我们会以缩略图的形式展示图片，当用户将鼠标移动到缩略图上时，我们就会按原图大小显示出来。这种应用已经很普遍，尤其在商品展示和用户头像场景中。

写之前发现网上的都不是很理想，兼容性一般。再看了《超越CSS》之后，觉得上面的想法不错，这次和大家分享一下。大致思路就是：通过绝对定位把缩略图图排列好，然后通过css的hover伪类属性来实现图片尺寸放大。具体如下：

CSS文件如下：

<style type="text/css" title="">
body{width:320px;margin:0 auto;padding:20px;background:#000;color:#000;}
#main-content{border:5px solid #7bc809;padding:5px;background:#fff ;}
ul{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding给图片撑开空间*/} li{display:inline;}
li a{position:relative;}
li a:hover{position:relative;color:#000;z-index:1000;}
/*此处要有border:none属性，否则IE6下面无法显示出来，是IE6伪类的BUG*/
li a img{width:100px;height:100px;border:none;position:absolute;}
/*使用绝对定位让图片固定，从而脱离页面流*/
li a:hover img{
position:absolute;left:-10px;top:-50px;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;}
/*<