CSS cursor鼠标样式大比拼，鼠标样式详细介绍

直接运行下面的代码开效果

<html>
<head>
    <title>鼠标样式大比拼</title>
    <style>
        body{display: flex;flex-wrap:wrap;align-content: flex-start;}
        div{margin: 10px;width: 150px;height: 150px;display: flex;justify-content: center;text-align: center;align-items: center;background-color: #00000011;}
        div:hover{background-color: #00000022;}
        .auto{cursor:auto;}
        .default{cursor:default;}
        .none{cursor:none;}
        .initial{cursor:initial;}
        .inherit{cursor:inherit;}
        .context-menu{cursor:context-menu;}
        .help{cursor:help;}
        .pointer{cursor:pointer;}
        .progress{cursor:progress;}
        .wait{cursor:wait;}
        .cell{cursor:cell;}
        .crosshair{cursor:crosshair;}
        .text{cursor:text;}
        .vertical-text{cursor:vertical-text;}
        .alias{cursor:alias;}
        .copy{cursor:copy;}
        .move{cursor:move;}
        .no-drop{cursor:no-drop;}
        .not-allowed{cursor:not-allowed;}
        .all-scroll{cursor:all-scroll;}
        .col-resize{cursor:col-resize;}
        .row-resize{cursor:row-resize;}
        .n-resize{cursor:n-resize;}
        .e-resize{cursor:e-resize;}
        .s-resize{cursor:s-resize;}
        .w-resize{cursor:w-resize;}
        .ne-resize{cursor:ne-resize;}
        .nw-resize{cursor:nw-resize;}
        .se-resize{cursor:se-resize;}
        .sw-resize{cursor:sw-resize;}
        .ew-resize{cursor:ew-resize;}
        .ns-resize{cursor:ns-resize;}
        .zoom-out{cursor:zoom-out;}
        .grab{cursor:grab;}
        .grabbing{cursor:grabbing;}
    </style>
</head>
<script>
    let cursors = [
        'auto',
        'default',
        'none',
        'initial',
        'inherit',
        'context-menu',
        'help',
        'pointer',
        'progress',
        'wait',
        'cell',
        'crosshair',
        'text',
        'vertical-text',
        'alias',
        'copy',
        'move',
        'no-drop',
        'not-allowed',
        'all-scroll',
        'col-resize',
        'row-resize',
        'n-resize',
        'e-resize',
        's-resize',
        'w-resize',
        'ne-resize',
        'nw-resize',
        'se-resize',
        'sw-resize',
        'ew-resize',
        'ns-resize',
        'zoom-out',
        'grab',
        'grabbing',
    ]
    document.write(cursors.map(v => (`<div  class="${v}" >${v}</div>`)).join(''));
</script>
</html>

运行上面的代码，然后将鼠标指向不同的 HTML 元素，可以发现当指向不同的元素时鼠标的样式也会发生相应的改变。

在浏览网页的过程中，当我们将鼠标移动到某些元素上时，鼠标的样式会随之改变。比如鼠标指向文字，鼠标的样式会变成像大写字母I；当鼠标指向链接时，鼠标会变成小手的形状等。

除了这些默认的变化外，您还可以通过 CSS 中的 cursor 属性来改变网页中鼠标（光标）的样式，下表中列举了 cursor 属性的可选值：

属性值	示意图	描述
auto		默认值，由浏览器根据当前上下文确定要显示的光标样式
default		默认光标，不考虑上下文，通常是一个箭头
none		不显示光标
initial		将此属性设置为其默认值
inherit		从父元素基础 cursor 属性的值
context-menu		表示上下文菜单可用
help		表示有帮助
pointer		表示一个链接
progress		进度指示器，表示程序正在执行一些处理，但是您仍然可以在该界面进行一些操作（与 wait 不同）
wait	扫描二维码关注公众号，回复： 15805942 查看本文章	表示程序繁忙，您应该等待程序指向完成
cell		表示可以选择一个单元格（或一组单元格）
crosshair		一个简单的十字准线
text		表示可以选择的文本
vertical-text		表示可以选择的垂直文本
alias		表示要创建别名或快捷方式
copy		表示可以复制某些内容
move		表示可以移动鼠标下方的对象
no-drop		表示所拖动的项目不能放置在当前位置
not-allowed		表示无法完成某事
all-scroll		表示对象可以沿任何方向滚动（平移）
col-resize		表示可以水平调整列的大小
row-resize		表示可以垂直调整行的大小
n-resize		表示对象的边缘可以向上（向北）移动
e-resize		表示对象的边缘可以向右（向东）移动
s-resize		表示对象的边缘可以向下（向南）移动
w-resize		表示对象的边缘可以向左（向西）移动
ne-resize		表示对象的边缘可以向上和向右（北/东）移动
nw-resize		表示对象的边缘可以向上和向左（北/西）移动
se-resize		表示对象的边缘可以向下和向右（向南/向东）移动
sw-resize		表示对象的边缘可以向下和向左（南/西）移动
ew-resize		表示可以双向调整对象大小的光标
ns-resize
nesw-resize
nwse-resize
zoom-in		表示可以放大某些内容
zoom-out		表示可以缩小某些内容
grab		表示可以抓取（拖动）某些东西
grabbing		表示已经抓取到某些东西
url(“”)		自定义光标的样式，括号中的内容为光标图像的源文件路径