【图片上鼠标滑过图片时遮罩层划过显示】

:nth-child()和:nth-of-type()的区别

:nth-child(n) 选择器匹配父元素中的第 n 个子元素（n是相对于父元素来说的第几个位置），元素类型没有限制。

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素（n是相对于同一类标签而言的第n个）。

n可以是一个数字，一个关键字，或者一个公式。

  <div class="box">
        <img src="img\练习1cat.jpg" alt="cat">
        <div class="text">请关注我</div>
    </div>

    <div class="box">
        <img src="img\练习1cat.jpg" alt="cat">
        <div class="text">请关注我</div>
    </div>

    <div class="box">
        <img src="img\练习1cat.jpg" alt="cat">
        <div class="text">请关注我</div>
    </div>

    <div class="box">
        <img src="img\练习1cat.jpg" alt="cat">
        <div class="text">请关注我</div>
    </div>

 .box {
            width: 220px;
            height: 220px;
            border: 1px solid black;
            position: relative;
            /* 参考物 */
            /* 隐藏 */
            overflow: hidden;
            float: left;
            margin-left: 20px;
        
        }

        .text {
            width: 220px;
            line-height: 60px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            position: absolute;
            /* 被移动的对象 */
            /* 过渡时间为0.8秒 */
            transition: 0.8s;
        }

       
        /* 找到第一个使用了.box 的标签，再找到其内部标签中使用了.text的标签*/
        .box:nth-child(1) .text {
            left: -220px;
            bottom: 0px;
        }
        /*  找到第一个使用了.box 的标签，再找到其内部标签中使用了.text的标签，鼠标滑过该.box时，该.text进行动作 */
        .box:nth-child(1):hover .text {
            left: 0px;
        }

        /* 第二个box 中的text*/
        .box:nth-child(2) .text{
            left: 220px;
            bottom: 0px;
        }
        .box:nth-child(2):hover .text{
            left: 0px;
        }

        /* 第三个box内部（空格）的text */
        .box:nth-child(3) .text{
            bottom: -60px;

        }
        .box:nth-child(3):hover .text{
            bottom: 0px;
        }

        /* 第四个box内部的text */
        .box:nth-child(4) .text{
           top: 80px ;
           left: 220px;
        }
        .box:nth-child(4):hover .text{
            left: 0px;
        }

以上效果：图片上鼠标滑过图片时遮罩层划过显示