项目中有个功能块，做个模型

样式部分：

#d{

width:200px;

height:200px;

boder:none;

background:wheat;

overflow:hidden;

margin:0 auto;

position:relative;

}

.d1{

width:198px;

height:198px;

border:none;

background:url() no-repeat;

background-size:100% 100%;

}

.d1:hover .d2{

width: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{

width: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里边，形成父子关系。

转载于:https://www.cnblogs.com/sweeeper/p/6554189.html