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

浏览: 436次 日期:2018年03月23日 22:34:45 作者:青格勒

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

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

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

一些小点击查看

url 需要一个自定义的图片,图片高宽必须一样才会出现
default 默认(箭头)
auto 默认(浏览器设置的光标)
crosshair 十字线
pointer 手型
move 可移动光标
e-resize 向右移动
ne-resize 向右上移动
nw-resize 向左上移动
n-resize 向上移动
se-resize 向右下移动
sw-resize 向左下移动
s-resize 向下移动
w-resize 向左移动
text 文本光标
wait 程序正忙(表、沙漏、圆圈)
help 帮助(问号、气球)

 

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

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

 

 

文章链接:http://cenggel.com/htmlcss/71.html

版权声明:文章《浅谈css之cursor属性、一个关系到用户体验的属性》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

2条回应:“浅谈css之cursor属性、一个关系到用户体验的属性”

  1. 增大网说道:

    我踩故我在,下次还会来!

  2. 增大说道:

    受益匪浅,感触良多!

发表评论

电子邮件地址不会被公开。 必填项已用*标注