把原先的div display:none 该变让他显示或者直接写入个div 位置就是当前鼠标的位置 也可以 这个比较好用 。
实现鼠标悬停在图片上底部弹出文字内容的实现方法：HTML代码:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS代码：
#wrapper .text {
position:relative
bottom:30px
left:0px
visibility:hidden
}
#wrapper:hover .text {
visibility:visible
}
主要思路是利用hover来进行功能实现，transition-duration:来实现过度动画；
css这样实现
html如下
.download-block{
width:90%
height:100px
background:#0b0e32
/*margin: 100px auto 0*/
margin:0 auto
position:absolute
left:0
right:0
transition-duration:2s
opacity:0.7
}
.download-block1{
background:transparent
height:100px
overflow:hidden
position:relative
left:0
top:-100px
right:0
padding-top:100px
transition-duration:2s
opacity:0.7
cursor:pointer
}
.download-block1:hover{
padding-top:0
transition-duration:2s
opacity:0.7
}
