内容中浮动层可用于解释说明或提示某些重要信息。默认情况下不会显示,只有当鼠标滑过时,浮动层才会显示出来。
利用CSS制作内容浮动层效果预览
默认情况下
鼠标滑过时
示例预览:利用CSS制作内容浮动层效果
制作内容浮动层效果需要使用的3个CSS属性
- 伪类(:hover)—— 其作用就是响应鼠标滑过滑出动作
- z-index —— 元素层级,层级高的元素会覆盖层级低的元素
- display —— 元素显示类型
制作内容浮动层效果的HTML代码
<div class="infobox">
<img src="http://renniaofei.com/wp-content/themes/renniaofei/images/default-thumbnail.gif" width="200">
<div class="infotxt"><a href="http://renniaofei.com" title="任鸟飞网页设计博客">任鸟飞网页设计博客</a></div>
<div class="more">任鸟飞网页设计博客,是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客,作者任鸟飞。
Twitter:<a href="http://www.twitter.com/renniaofei">@renniaofei</a></div>
</div>
制作内容浮动层效果的CSS代码
.infobox {
position:relative;
border:1px solid #000;
background-color:#FFFFFF;
width:200px;
padding:10px;
}
.infobox img {
position:relative;
z-index:2; /* 此元素的层级 z-index 须大于 .infobox:hover .more中设置的层级 */
}
.infobox .infotxt {
text-align: center;
margin-top: 10px;
}
.infobox .more {
display:none; /* 默认情况下设置为不可见 */
}
.infobox:hover .more {
display:block; /* 鼠标滑过时 显示层 */
position:absolute;
z-index:1;
left:4px;
top:4px;
width:500px;
height:200px;
padding:5px 5px 5px 220px;
border:1px solid #900;
background-color:#FFEFEF;
}
总结
制作浮动层关键点在display和z-index。使用display控制元素的显示与否;使用z-index控制元素的层级。
这效果很炫啊。。。不错。。