鼠标悬浮出现圆形信息遮罩层
分类：实例代码
鼠标悬浮出现圆形信息遮罩层属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了鼠标悬浮出现圆形遮罩层的效果。
遮罩层之上有信息描述，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.icon-lists {
overflow: hidden;
background: #f7f7f7;
padding: 40px;
}
.icon-lists .box {
float: left;
margin-right: 10px;
}
.box {
position: relative;
width: 46px;
height: 46px;
overflow: hidden;
z-index: 1;
}
.box .info {
display: block;
width: 46px;
height: 46px;
border-radius: 46px;
}
.box .icon {
position: absolute;
top: 0;
line-height: 46px;
text-align: center;
background: #eee;
color: #333;
font-size: 14px;
}
.box .info {
position: absolute;
top: 46px;
z-index: 2;
background: orange;
color: #fff;
text-align: center;
line-height: 46px;
-webkit-transition: top .2s ease-in;
-moz-transition: top .2s ease-in;
transition: top .2s ease-in;
}
.box:hover > .info {
top: 0;
}
</style>
</head>
<body>
<ul class="icon-lists">
<li class="box">
<i class="icon">A</i>
<div class="info">div</div>
</li>
<li class="box">
<i class="icon">B</i>
<div class="info">css3</div>
</li>
<li class="box">
<i class="icon">C</i>
<div class="info">jquery</div>
</li>
<li class="box">
<i class="icon">D</i>
<div class="info">json</div>
</li>
</ul>
</body>
</html>
上面的代码实现了我们的要去，下面介绍一下它的实现过程。
一.代码注释:
* {
margin: 0;
padding: 0;
}
删除所有元素的外边距和内编剧。
星号是一个通配符选择器，可以参阅CSS 通配选择符(*)一章节。
其实在实际项目中通常会使用专门的重置css，具体可以参阅css预重置样式代码一章节。
ul {
list-style: none;
}
去掉默认的li元素前面的样式。
.icon-lists {
overflow: hidden;
background: #f7f7f7;
padding: 40px;
}
容器的样式，设置背景色和内边距等。
.icon-lists .box {
float: left;
margin-right: 10px;
}
设置左浮动，外右边边距是10px。
.box {
position: relative;
width: 46px;
height: 46px;
overflow: hidden;
z-index: 1;
}
设置元素为相对定位，目的是让内部定位的元素以它为参考对象。
.box .info {
display: block;
width: 46px;
height: 46px;
border-radius: 46px;
}
设置信息元素的相关样式。
这里比较关键的就是将它设置为圆形。
.box .icon {
position: absolute;
top: 0;
line-height: 46px;
text-align: center;
background: #eee;
color: #333;
font-size: 14px;
}
设置默认状态存放ABCD字符的元素的样式。
.box .info {
position: absolute;
top: 46px;
z-index: 2;
background: orange;
color: #fff;
text-align: center;
line-height: 46px;
-webkit-transition: top .2s ease-in;
-moz-transition: top .2s ease-in;
transition: top .2s ease-in;
}
设置信息元素的样式，默认top值是46px，也就是说它是隐藏的。
并且通过transition设置top以动画方式改变。
.box:hover > .info {
top: 0;
}
鼠标悬浮改变信息元素的top值。
二.相关阅读:
（1）.position可以参阅css position一章节。
（2）.transition可以参阅CSS3 transition一章节。
（3）.:hover可以参阅CSS E:hover一章节。
鼠标悬浮出现圆形信息遮罩层，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮出现圆形信息遮罩层就介绍到这了。