css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型

适当调整即可变为图片放大镜效果，或者鼠标移上去显示隐藏内容(ie6对hover支持不够完善，推荐在火狐或谷歌中观看)。

效果如图：



css：

.demo {
width: 318px;
margin: 100px auto 0 auto;
}

.demo:after {
content: "";
display: block;
height: 0;
clear: both;
}

.demo li {
width: 100px;
height: 100px;
border: 1px solid #e5e5e5;
background: #fafafa;
float: left;
margin: 2px;
list-style-type: none;
position: relative;
z-index: 1;
}

.demo li:hover { z-index: 2; }

.demo li:hover div { display: block; }

.demo li div {
width: 204px;
height: 204px;
border: 1px solid #e5e5e5;
position: absolute;
top: -51px;
left: -51px;
display: none;
background: #fafafa;
}

html：

<ul class="demo">
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>