html鼠标经过有遮罩层,CSS实现鼠标悬浮出现遮罩层示例源码

先来一个简单的实现方法：

复制代码代码如下:

Document

.mask-wrapper {

position: relative;

overflow: hidden;

}

.mask-inner {

position: absolute;

left: 0;

top: 100%;

width: 100%;

height: 100%;

-moz-transition: top ease 200ms;

-o-transition: top ease 200ms;

-webkit-transition: top ease 200ms;

transition: top ease 200ms;

}

.mask-wrapper:hover .mask-inner {

top: 0;

}

#my-mask {

width: 300px;

height: 200px;

background: red;

}

#my-mask .mask-inner {

background: rgba(0,0,0,.5);

}

Lorem ipsum

foo bar

效果图：

来个更高级点的：

复制代码代码如下:

Document

* {

margin: 0;

padding: 0;

}

body {

font: 12px/1.5 arail;

}

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 i, .box .info {

display: block;

width: 46px;

height: 46px;

border-radius: 46px;

}

.box .shadow {

position: absolute;

top: 0;

z-index: 10;

border-radius: 0;

background: url(http://xiaomingming.qiniudn.com/shadow.png) no-repeat;

}

.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;

}

• A

  服装

• B

  鞋包

• C

  配饰

• D

  运动