CSS cursor 属性使用方法及示例

由网友 大卫 发布 阅读 6

CSS cursor 属性使用方法及示例

cursor CSS属性指定当指针被放置在一个元素上显示的光标类型。

下表为此属性的用法说明和版本历史记录,以及该属性在javascript脚本中的使用语法。

默认值:auto
适用于:所有元素
继承:
可动画制作:否。请参见 动画属性
版本:CSS 2、3
JavaScript 语法: object.style.cursor="context-menu"

cursor的使用语法

该属性的语法如下:

cursor: [url(address of cursor file),] 0 or more times | auto | default | none |
        context-menu | help | pointer | progress | wait | cell |  crosshair | text | vertical-text |
        alias | copy | move | no-drop | not-allowed | grab | grabbing | 
        e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize |
        ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize |
        all-scroll | zoom-in | zoom-out | initial | inherit

下面的示例演示了如何使用cursor属性。

  h1 {
   cursor: copy;
  }
  p {
   cursor: help;
  }
  a {
   cursor: url("custom.gif"), url("custom.cur"), default;
  }
测试看看‹/›

cursor属性用来指定用逗号分隔的用户定义的游标值列表,后跟“通用游标”。也就是如果第一个光标指定不正确或找不到,则将使用逗号分隔列表中的下一个光标,依此类推,直到找到可用的光标为止。

如果没有用户定义的游标有效或不受浏览器支持,则将使用列表末尾的通用游标。学到更多。

属性值

下表描述了此属性的值。

描述
常用
auto 浏览器根据当前上下文确定要显示的光标。例如,将文本悬停在文本上。这是默认值。
default默认光标平台的默认光标,不考虑上下文,通常是箭头。
none 没有呈现光标。
initial
将此属性设置为其默认值。
inherit
如果指定,则关联元素采用其父元素cursor的属性值。
链接和状态游标
context-menu上下文菜单光标表示上下文菜单可用。
help帮助光标表示有帮助。
pointer指针光标指示链接的光标,通常是带有伸出的食指的手。
progress进度游标进度指示器。该程序正在执行一些处理,但是用户仍然可以与界面进行交互(与不同wait)。
wait等待光标表示程序忙,用户应该等待。
选择光标
cell单元游标表示可以选择一个单元格(或一组单元格)。
crosshair十字线光标一个简单的十字准线。通常用于指示位图中的选择。
text文字游标表示可以选择的文本,通常是工字梁。
vertical-text垂直文本光标表示可以选择垂直文本,即横向工字梁。
拖放游标
alias别名光标表示要创建别名或快捷方式。
copy复制光标表示可以复制某些内容。
move移动光标表示可以移动悬停的对象。
no-drop无丢游标表示所拖动的项目不能放置在当前位置。
not-allowed不允许的游标表示无法完成某事。
调整大小和滚动游标
all-scroll全滚动光标表示可以沿任何方向滚动(平移)。
col-resize彩色游标指示可以水平调整列的大小。
row-resize行大小调整游标指示可以垂直调整行的大小。
n-resizeN尺寸游标指示某些边缘要向上移动(向北)。
e-resizee-resize游标指示某些边缘将向右移动(向东)。
s-resizes-resize-cursor指示某些边缘要向下移动(向南)。
w-resizeW尺寸游标指示某些边缘将向左移动(向西)。
ne-resizeNE调整大小的游标指示某些边缘将向上和向右移动(北/东)。
nw-resizeNW调整游标指示某些边缘要上下移动(北/西)。
se-resizeSE调整游标指示某些边缘要左右移动(向南/向东)。
sw-resizeSW调整游标指示某些边缘要上下移动(南/西)。
ew-resizeEW调整游标指示双向调整大小光标。
ns-resizeNS调整大小的游标
nesw-resizeNESW调整大小的游标
nwse-resizeNWSE调整大小的游标
缩放光标
zoom-in放大光标表示可以放大某些内容。
zoom-out缩小光标表示可以缩小某些内容。
grab抓取光标表示可以抓取某些东西(拖动以进行移动)。
grabbing抓取光标表示某物被抓住了。

浏览器兼容性

cursor属性浏览器的兼容性,下表中的数字表示支持该属性的浏览器最低版本号;所有主流浏览器均支持该属性。

浏览器图标
  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 4+

  • Apple Safari 1.2+

  • Opera 7+

进一步阅读

参见教程:CSS游标

CSS3 column CSS content 属性