CSS进阶 光标类型&设置遮罩

目录

1. 光标

1.1 光标设置

1.2 有哪些光标

1.3 应用

2. CSS遮罩设置

---

1. 光标

1.1 光标设置

鼠标移动到元素上面，鼠标呈现的效果。

1.2 有哪些光标

光标	效果
default	默认
pointer	小手-点击
text	工字形-文本
move	十字-移动

1.3 应用

cursor: pointer;

常常用于a标签、logo，和点击功能结合

cursor: move;

鼠标经过，光标变成十字型，和移动功能结合

cursor: text;

鼠标经过，光标变成工字型，表示文本可以复制。

切记，光标不能滥用，如果滥用，会导致页面的功能复杂化，降低用户的体验

2. CSS遮罩设置

代码：

HTML：

    <div class="bg">
        <img src="1111.jpg" alt="">
        <div class="mask">
        </div>
    </div>

CSS：

.bg {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto;
        }

        .bg img {
            width: 100%;
        }

        .mask {
            display: none;
            /* 1. 设置宽高和背景图片一致 */
            width: 250px;
            height: 250px;
            /* 2. 设置背景颜色 用rgba的形式设置透明度 */
            background-color: rgba(0, 0, 0, .3);
            /* 3. 设置绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 4. 鼠标经过，遮罩显示 */
        .bg:hover .mask {
            cursor: pointer;
            display: block;
        }

步骤归纳：

        1. 设置好div容器和图片的样式

        2. 设置遮罩的样式

•                 遮罩宽高和图片一致
•                 遮罩的颜色采用rgba的形式，也可以用opacity属性
•                 给遮罩设置绝对定位，.bg盒子设置相对定位
•                 遮罩设置display:none；
•                 鼠标hover经过父盒子！，遮罩设置display:block。如果出错，可能就是这里的选择器出问题
• 
• 如图会有一层阴影在图片上面

结尾：

学习id： 201903090124-13

现在是大三学生，学习到了前后端交互的mysql阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。