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

作者:     目录: PHP+MySQL     发表: 2010年05月09日

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

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

默认情况下

利用CSS制作内容浮动层

鼠标滑过时

利用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控制元素的层级。

标签:

25 个评论

  1. 阿东说道:

    这效果很炫啊。。。不错。。

发表评论