css鼠标移上背景滑动显示

Demo下载 效果如图：



css：

a {
display: inline-block;
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 0 5px;
height: 24px;
text-align: center;
line-height: 24px;
position: relative;
color: #000;
}

a>span {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
z-index: 2;
}

a:hover>span {
color: #fff;
-moz-transition: all 0.15s ease-in;
-webkit-transition: all 0.15s ease-in;
-o-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}

a:before {
content: "";
width: 100%;
height: 24px;
background: #f5485c;
position: absolute;
top: -24px;
left: 0;
z-index: 1;
opacity: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-transition: all 0.15s ease-in;
-webkit-transition: all 0.15s ease-in;
-o-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}

a:hover:before {
opacity: 1;
top: 0;
}

html：

<a href="#"><span>哈哈哈</span></a>