CSS 属性 cursor 手势设置(琐碎知识点整理) | 您所在的位置:网站首页 › 点击手势图标怎么弄 › CSS 属性 cursor 手势设置(琐碎知识点整理) |
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。 好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 cursor 属性规定要显示的光标的类型(形状)。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 1. 常用鼠标设置方式 1. pointer (手) --> cursor: pointer; 2. crosshair (十字线) --> cursor: crosshair; 3. default (箭头) --> cursor: default; 2. url 属性所详解 div{ // 默认光标 cursor: url(http://asd.com/favicon.ico), auto; } div:active{ // down 光标状态 cursor: url(http://asdasw2/asdasda.png), auto; } 使用 url 设置建议: 1. 图片地址最好绝对路径, 相对路径也可以 。 2. 图片大小最好是 32*32 的大小, 要是比这个尺寸大在各个浏览器下面解析的大小不一样 。 3. 图片格式为 .ico 兼容性最好 。 3. cursor 属性完整取值 default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针(一只手) move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右(东)移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize 此光标指示矩形框的边缘可被向上(北)移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。 w-resize 此光标指示矩形框的边缘可被向左移动(西)。 text 此光标指示文本。 wait 此光标指示程序正忙(通常是一只表或沙漏)。 help 此光标指示可用的帮助(通常是一个问号或一个气球)。 图片示例: |
CopyRight 2018-2019 实验室设备网 版权所有 |