Question

如何使用css的overflow属性改变缩略图大小?

最近发现google对图片显示进行了改变，当鼠标移动到图片上时，可以放大图片缩略图，这样一来，用户想查看图片时变得更快捷。同时发现改变大小时有一定的延时，应该使用了js。今天，我们不用js，就用css中overflow属性来实现这样的效果。当然，最终结果没有进行延时显示。如何实现呢？

若以下回答无法解决问题，邀请你更新回答

Answer 1

先简单看看html代码：<divid="preview"><ahref="#"><imgsrc="http://www.jquery001.com/images/demo/0601.jpg" alt="" /></a><ahref="#"><imgsrc="http://www.jquery001.com/images/demo/0603.jpg" alt="" /></a>       <ahref="#"><imgsrc="http://www.jquery001.com/images/demo//0602.jpg" alt="" /></a>    </div>css样式如下：#preview a{float:left;width:200px;height:200px;margin-left:5px;overflow:hidden;position:relative;z-index:1;} #preview a img{position:absolute;top:-100px;left:-100px;} #preview a:hover{overflow:visible;z-index:2;}可以看出，实现的原理主要是，设定a标签的宽度和高度，当图片宽度、高度超出指定大小时，进行隐藏。当鼠标移动到a标签上时，overflow属性值设置为visible以显示图片，这样即实现了我们想要得到的效果。当然，这里只是简单的说明了一下实现的原理，如果你有兴趣进行完善，可以完善一下样式，以在实例中进行使用。 查看原帖>>