之前给大家演示过很多悬停动画的效果，比如悬停后字体颜色的改变，悬停后图片的出现，等等！方法都大同小异，条条道路通罗马。下面给大家讲解一下如何制作悬停后盒子的偏移覆盖之前的内容。

首先来看看未悬停时的效果如下图：

然后当我们把鼠标悬停在这个框的时候，下方的内容就会慢慢浮上来盖住上面的内容，效果如下图的左边部分：

刚刚给大家介绍了一下整体的效果，现在下面给大家讲解一下一个整体的布局和css样式。

布局如下图：

当然这只是一种布局，布局可以很多种。

上面我们可以看到我们的布局首先是由一个大div盒子包起来，然后里面的结构可以看到是一个ul、li的结构，其次我们在看到ul里面还包了一个div，div里面还包了一个p标签。

简单的布局这已经算是完成了，然后我们来看看何如写css样式做出如上图的效果。

首先我们先是给body，ul，li去掉内外边距和去掉li前面的点点。代码如下：

body,ul,li, {

margin: 0px;

padding: 0px;

list-style: none;}

然后给大盒子设置边框：

.m_b_box2 {width: 1000px;height: 100px;float: left;}

同样我们的ul也需要设置边框、调好位置，字体大小，内外边距等等：

.m_b_box2 ul {

width: 250px;

height: 100px;

border: 1px solid #EEEEEE;

line-height: 100px;

font-size: 20px;

overflow: hidden;

float: left;

margin: 0px 20px;

0px 20px

}

我们可以看到上面为悬停时是有一张商业图标的图片的，同样图片也需要设置好大小、外置等等，代码如下：

.m_b_box2 ul li:nth-child(1) img {

margin: 32px 0px 0px 25px;

}

再之后就是给li浮动排列好：

m_b_box2 ul li {

float: left;

}

其次就是设置好p标签内容的边框，字体大小，行高，居中，内外边距等等

代码如下：

.m_b_box2 ul div p {

width: 250px;

height: 100px;

font-size: 12px;

line-height: 30px;

float: left;

text-align: center;

background: lightskyblue;

color: white;

margin-top: -8px;

transition: 1s;

}

最后就是设置悬停后的效果了，前面我们已经在p标签里规定好过渡的时间了，现在我们要做的就是悬停了，代码如下：

.m_b_box2 ul:hover p {

transform: translateY(-102px);

}

然后我们的制作就算完成了。上述只是个人方法,如有错误，欢迎指正错误。

其实很多悬停效果都大同小异，只是悬浮后指定出现的是什么不同而已。

希望以上内容能给大家带来收益，谢谢大家。