鼠标移入--图片遮罩显示

Posted 2020-10-01 莫小龙

小白之鼠标移入--图片遮罩显示

效果：当鼠标移入图片时，图片被一块半透明黑色块遮住，并显示色块上按钮或文本。

原理：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");
        });
    })