提升用户体验之 选用合适的鼠标光标

用户体验可以说是前端的重中之重，产品使用的舒适度是用户体验的重要衡量标准，可以说用户体验的好坏直接影响这网站或者应用的发展前景，（国企app另说）。

本文就来说一说用户体验方面的鼠标光标状态指示的使用。

实际体验案例请移步这里

PC端我们通常会在不同的场景下使用不同的鼠标光标来表示对应的操作指示。

例如能够点击的地方我们让鼠标变成小手，能够拖动的地方，我们鼠标变成四个箭头的icon,禁止点击的按钮，鼠标应该是禁止标志，等等一系列的状态。

如果默认的没有我们适合的，我们还可以指定icon来作为鼠标的icon。总之，在对应的地方使用合适的鼠标状态，能够提升交互感，带来更好的体验。

下面列出浏览器默认的，被大多数浏览器支持的鼠标属性，

.default{
    cursor: default;
}
.inherit{
    cursor: inherit;
}
.auto{
    cursor: auto;
}
.none{
    cursor: none;
}
.pointer{
    cursor: pointer;
}
.help{
    cursor: help;
}
.move{
    cursor: move;
}
.wait{
    cursor: wait;
}
.copy{
    cursor: copy;
}
.cell{
    cursor: cell;
}
.all-scroll{
    cursor: all-scroll;
}
.context-menu{
    cursor: context-menu;
}
.text{
    cursor: text;
}
.vertical-text{
    cursor: vertical-text;
}
.crosshair{
    cursor: crosshair;
}
.progress{
    cursor: progress;
}
.not-allowed{
    cursor: not-allowed;
}
.no-drop{
    cursor: no-drop;
}
.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;
}
.ns-resize{
    cursor: ns-resize;
}
.nw-resize{
    cursor: nw-resize;
}
.nwse-resize{
    cursor: nwse-resize;
}
.nesw-resize{
    cursor: nesw-resize;
}
.ew-resize{
    cursor: ew-resize;
}
.se-resize{
    cursor: se-resize;
}
.sw-resize{
    cursor: sw-resize;
}  

（完）