首页 > 代码库 > 鼠标移入--图片遮罩显示
鼠标移入--图片遮罩显示
效果：当鼠标移入图片时，图片被一块半透明黑色块遮住，并显示色块上按钮或文本。
原理：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"); }); })
鼠标移入--图片遮罩显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。