方法:剛開始隱藏內容,鼠標放上去改變定位的bottom的值,主要用了定位和隱藏
```
<div class="box">
<span class="bottom"></span>
</div>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;//隱藏下面的內容
position: relative;
margin:50px auto;
top:0;
}
.box .bottom{
position: absolute;
left: 0;
bottom: -85px;//將內容置于下方
width: 100%;
background-color: orange;
height: 60px;
transition: all .5s;
}
.box:hover {
top: -5px;
box-shadow: 0 0 15px #AAA;
}
.box:hover .bottom{
bottom: 0px;//鼠標放上去,顯示下面的內容
}
</style>
```
**剛開始:隱藏**

**鼠標放上去:顯示**
