首页 > 代码库 > css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型
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>
css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型