样式部分：
#d{
200px;
height:200px;
boder:none;
background:wheat;
overflow:hidden;
margin:0 auto;
position:relative;
}
.d1{
198px;
height:198px;
border:none;
background:url() no-repeat;
background-size:100% 100%;
}
.d1:hover .d2{
198px;
height:198px;
border:1px solid goldenrod;
transition:all 0.3s ease;
background:gray;
margin-top:0px;
position:absolute;
z-index:222;
background:rgba(159,255,33,0.4);
left:0;
top:0;
color:white;
}
.d2{
198px;
height:198px;
border:1px solid goldenrod;
background:rgba(159,255,33,0.4);
position:absolute;
z-index:222;
margin-top:199px;
color:white;
}
h2{
text-align:center;
}
li{
list-style:none;
}
*{
margin :0;
padding:0;
}
HTML部分：
<div id='d'>
<div class='d1'>
<div class='d2'>
<p>
<h2>参数列表</h2>
<ul>
<li>虚拟交换机：dass</li>
<li>虚拟交换机：dass</li>
<li>虚拟交换机：dass</li>
</ul>
</p>
</div>
</div>
</div>
注：需要注意一点的就是，hover移动另外一个div需要将其放在悬停的那个div里边，形成父子关系。