你所不知道的cursor妙用

平常时候,我们很少去关注cursor的各种属性,最多就是当有链接跳转的时候给它添加上一个cursor:pointer的属性,让鼠标显示手型.今天无意中看到一些其他属性,就研究记录下来,希望对以后的用户体验优化有所帮助.

首先先来上cursor所有的值

注:本表格中所有图例都是在chrome浏览器中截图所得...

 

描述
url

需要使用的自定义光标的url

(注:Opera9.3和Safari3不支持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  此光标指示可用的帮助(通常是一个问号或一个气球)。

 

 

posted @ 2017-03-30 09:35  上山打松鼠  阅读(279)  评论(0编辑  收藏  举报