浅谈css之cursor属性、一个关系到用户体验的属性

前端很多时候做前端页面都会忽略用户习惯和引导用户的操作，比如拖动、链接点击、文本输入等等。

今天咱们就说一说cursor这个属性。

1、先了解一下cursor这个属性的值

一些小点击查看

2、使用场景

2-1、cursor:url

一般是不用的，记得有一次想做一个砸蛋活动，然后需求是鼠标必须是一个锤子的样子，当初第一个想法是使用js去定位一个盒子去做，但是时间实在是有点紧，问了一下我师父怎么办？

当初直接给了我一个白眼，说使用cursor:url来做。

当然这中间也出现了一个问题，设计师给的图片居然显示不出来。

然后就是一一排查，图片路径是对的，图片的格式也是对的，就是不显示出来，换网上找的图片而是可以的，就是我的图片不行，苦恼的时候就是各种尝试。

当初因为是强迫症的原因看了一下图片的尺寸100*80，这明显不符合我的性格啊，果断变成100*100。

然后惊奇的发现居然好了，对这就是cursor:url的使用方法。

2-2、cursor:default

默认属性，一般来说不用的，但是有时候想要把a连接的手型取消的时候会用的到。

我是不会用cursor:default来取消a链接的手型，直接把a的href属性删除就ok的事情，咱们就别用css来弄了。

2-3、cursor:auto

默认的就不说了，一般也不加这东西

2-4、cursor:crosshair

这个其实没用过，倒是觉得在画布上使用。

2-5、cursor:pointer

用的最多的一个属性，一般我们写效果的使用难免会使用em，li，span等标签作为按钮使用，这时候就可以使用cursor:pointer来给这些非链接标签手型了。

手型意味着这东西是可点击的，其实这样对于用户的体验度是很高的，看见手型就意味着这里会有互动。

2-6、cursor:move

网站上有时候会做一些可拖动的块，那么怎么样才能让客户一下子就能知道这个东西是可拖动的块儿？

cursor:move就是干这个的，只要加上这个属性就会显示可拖动手型，从而暗示用户去操作。

2-7、cursor:e-resize、cursor:ne-resize、cursor:nw-resize、cursor:n-resize、cursor:se-resize、cursor:sw-resize、cursor:s-resize、cursor:w-resize

这个属性可以归类到一块去讲

1、如果是边界线，那么这个盒子是可以拖拉放大的

2、如果是一个线条，那么这个线条是可以拖动的

2-8、cursor:text

一般这个属性很少使用，适应一个鼠标的竖杠，可选择文本的意思

2-9、cursor:wait

一般表示当前是忙碌状态或者加载的意思。

如果用于加载，那么加载完成后需要使用JS去取消状态了

2-10、cursor:help

帮助，如果你的页面有帮助类信息的话可以使用这个属性。