学海无涯,回头是岸
不务正业
极简老人

在前端开发中,很多时候需要对页面的某些元素做鼠标样式的处理,比如button一般用pointer , 文本区一般用text......等等。

今天咱就来聊聊 这个经常用到的 cursor 属性

 cursor默认值auto(默认浏览器设置的光标。也就是空白区 箭头,文本区 I字形, 超链接/按钮 手型)

cursor的所有值

光标说明
default 系统默认光标
crosshair 十字光标
pointer(hand)IE5只认hand 手型光标
wait 等待光标(win7是个圈圈)
 help 帮助光标 
 no-drop 无法释放 
 text I型光标 
 move  移动光标
 n-resize   /   s-resize

这两个值的光标都长这样

(官方解释,n-向上(北)移动,s-向下移(南)动)

 e-resize    /     w-resize

 同上解释,e-向左(东) ,w-向右(西)

 ne-resize   /    sw-resize  同上解释,ne-向右上(东北) ,sw-向下左(西南)
 nw-resize  /   se-resize  同上解释,nw-向上左(西北) ,se-向下右(东南)
 not-allowed 禁止光标 
 progress  繁忙光标

最后说明下cursor: url(' # ');这个值,亲自测试过只有IE下才有效,firefox chrome Opera均不支持。

上一张firefox给出的报错,url值被丢弃了。

posted on 2017-04-23 00:00  MirageFireFox  阅读(304)  评论(0编辑  收藏  举报