任鸟飞网站设计博客

内容中浮动层可用于解释说明或提示某些重要信息。默认情况下不会显示，只有当鼠标滑过时，浮动层才会显示出来。

利用CSS制作内容浮动层效果预览

默认情况下

鼠标滑过时

示例预览：利用CSS制作内容浮动层效果

制作内容浮动层效果需要使用的3个CSS属性

• 伪类（:hover）—— 其作用就是响应鼠标滑过滑出动作
• z-index —— 元素层级，层级高的元素会覆盖层级低的元素
• display —— 元素显示类型

制作内容浮动层效果的HTML代码

<div class="infobox">
  <img src="http://www.renniaofei.com/wp-content/themes/renniaofei/images/default-thumbnail.gif" width="200">
  <div class="infotxt"><a href="http://www.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控制元素的层级。