标签：border absolute his tom enter center 宽高 button logs
效果：当鼠标移入图片时，图片被一块半透明黑色块遮住，并显示色块上按钮或文本。
原理：1.将图片位置创建<div>，固定宽高，绝对定位，并添加溢出隐藏。
2.添加两个<div>，第一个<div>用来装图片
3.第二个<div>添加半透明黑色背景，相对定位，并设置宽高。
4.添加js动画控制。
效果图：
代码：
引入jquery。
css：
ul{list-style: none;}
ul>li{width: 100px;height: 120px;text-align: center;float: left;margin: 20px;}
.imgarea{position: relative;width: 100px;height: 100px;overflow: hidden;}
.imglayer{}
.imglayer img{width: 100%;height: 100%;}
.textlayer{background: rgba(0,0,0,0.5);position:absolute;left: 0;top: -100px;width: 100px;height: 100px;padding: 10px;}
button{border: 3px solid #fff;background: none;padding: 5px 20px;color: #fff;margin-bottom: 3px}
html：
<ul> <li > <div class="imgarea"> <div class="imglayer"> <img src="img/folder.png" alt=""/> </div> <div class="textlayer"> <button>检查</button> <button>书写</button> </div> </div> <p>aaa</p> </li> </ul>
js:
$(function () {
$(".imgarea").hover(function () {
$(this).find(".textlayer").animate({top:"0"},"slow");
}, function () {
$(this).find(".textlayer").animate({top:"-100px"},"slow");
});
})
标签：border absolute his tom enter center 宽高 button logs
原文地址：http://www.cnblogs.com/s313139232/p/7281471.html
