琳琅满目的cursor属性值

琳琅满目的cursor属性值

友情不友情的小提示：☆（表示常用）

• 常规

  • cursor: auto; 默认值

    • 输入框表现是cursor: text (文本光标)
    • href属性的链接表现为cursor: pointer (手形光标)
    • button表现为cursor: default (默认箭头)

  • ☆ cursor: default; 系统默认光标

    • 误区产生的小故事：
      • 由于浏览器原生按钮样式兼容方面无法完善，尤其是IE盛行的年代，黑框、宽高不一致等问题层出不穷， 于是大家就使用a标签来模拟按钮，在每次hover上去的时候都会有一个手型效果，省去了额外添加， 所以久而久之就成了业内约定俗成的做法了

  • cursor: none; 这是让光标隐藏不见

    • what? 有何用？它的作用在看视屏的时候，全屏后鼠标静止不动3秒钟，就设置隐藏光标效果
    • IE8不支持，还要通过自定义光标来处理

    // 自定义光标
    .cur-none {
        cursor: url(transparent.cur), auto;
    }
    :root .cur-none {   // IE9+
        cursor: none
    }
    复制代码
    

• 链接和状态

  • ☆ cursor: pointer; 手形

  • cursor: help; 帮助光标

    • 用在帮助链接或者提示信息的问号小图标上
    • 不过目前很少在网页上看到，更多的是使用cursor:pointer手形处理

  • cursor: progress; 进行中

    • 一个适用场景是网页加载js的情况，网络不好时，加载js时间过长

    body {
        cursor: progress;
    },
    // 当js加载完成后再将光标cursor设为auto;
    // 增加了用户体验
    document.addEventListener('DOMContentLoaded', () => {
        document.body.style.cursor = 'auto';
    });
    复制代码
    

  • cursor: wait;

    • 没用的光标，有个沙漏的样子

  • cursor: context-menu;

    • 上下文菜单，兼容性很复杂，汽油桶形状，用处不大

• 选择

  • ☆ cursor: text; 文字可被选中

    • input默认光标表现就是cursor:text
      • 但是如果设置了disabled后，光标会自动变成cursor:default
    • 还有如果在现代浏览器中不允许文字选中的情况下，设置了user-select:none后，还要把对应的光标改变为cursor:default

    p {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }
    <p>弱水三千</p>
    // 不过现在最新版的浏览器都自动设置了cursor:default
    复制代码
    

  • cursor: vertical-text;

    • 垂直选中，文字排版是垂直情况的时候，基本没机会用到

  • cursor: crosshair;

    • 十字光标，它比较适合取色工具的场景中，平时用不到

  • cursor: cell;

    • 单元格光标，适合开发类似Excel表格的网页使用
    • 而且IE8还不支持，需要自定义，也是没机会表现了

• 拖拽

  • ☆ ccursor: move;
    • 移动光标，表示当前元素是可移动的
    • 常用的弹窗组件给标题栏加上cursor:move，让用户知道是可以拖动的
  • cursor: copy;
    • 复制光标，表示当前元素可以复制，IE8不支持，需自定义，无实用
  • cursor: alias;
    • 别名光标，表示当前元素可以创建别名或快捷方式，同上copy一样，没个卵用
  • cursor: no-drop与cursor: not-allowed;
    • 样式相同，都表示禁止的
    • 值得注意的是：
      • 不要给禁用按钮加cursor: not-allowed
      • 因为它的状态只与拖拽行为相关
      • 所以禁用按钮光标还是用default更合适

• 都是CSS3新增的光标类型

  • 缩放

    • cursor: zoom-in; 放大
    • cursor: zoom-out; 缩小

  • 抓取

    • cursor: grab; 五指张开的手
    • cursor: grabbing; 五指收起的手
    • Chrome下还需要加-webkit前缀生效
    • 这里QQ音乐PC端做了这样的cursor处理，如下图框选的位置
    image.png

• 自定义光标
  • 遇到一些IE8不支持的光标类型，可以通过自定义的手段来实现兼容
  • chrome等浏览器可以直接使用png图片作为光标
  • IE不行，它还是要用专门的.cur格式
  • 而自定义光标最大的作用其实是根据业务需求对光标进行样式上的自定义
  • 不过现在用的真是不多了

以上内容就介绍完了用户界面样式的全部内容了，还有最后一章的冷知识，大家不要方，继续看下去，了解一下，了解一下，了解一下

作者：chenhongdong
链接：https://juejin.im/post/5b406f40e51d45194832b759
来源：掘金