cursor
======

**`cursor`** CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

尝试一下
----

语法
--


```css
/\* 关键字值 \*/
cursor: pointer;
cursor: auto;

/\* 使用 URL，并提供一个关键字值作为备用 \*/
cursor: url(hand.cur), pointer;

/\* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 \*/
cursor:
  url(cursor1.png) 4 12,
  auto;
cursor:
  url(cursor2.png) 2 2,
  pointer;

/\* 全局属性 \*/
cursor: inherit;
cursor: initial;
cursor: unset;
```


cursor 属性为零个或多个<url>值，它们之间用逗号分隔，最后必填一个关键字值。每个<url>指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型。

每个<url>后面都可选跟一对空格分隔的数字<x><y>表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置)，位置相对于图标的左上角。

例如，下面的例子使用<url>值指定两个图像，为第二个图像提供<x><y>坐标，如果两个图像都无法加载，则返回`progress`关键字值：


```css
cursor:
  url(one.svg),
  url(two.svg) 5 5,
  progress;
```

### 值

<`url`>

`url(…)`或者逗号分隔的`url(…), url(…), …`，指向图片文件。用大于一个`<url>()`值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。详情参见cursor 属性中使用 URL 值。

`<x>` `<y>` 
实验性

可选 x，y 坐标。两个小于 32 的无单位非负数。

关键字值

鼠标悬浮于值上可实时演示

| 类型 | CSS 值 | 例子 | 描述 |
| --- | --- | --- | --- |
| General | `auto` |  | 浏览器根据当前内容决定指针样式例如当内容是文字时使用 text 样式 |
| `default` | default.gif | 默认指针，通常是箭头。 |
| `none` |  | 无指针被渲染 |
| 链接及状态 | `context-menu` | context-menu.png | 指针下有可用内容目录。 |
| `help` | help.gif | 指示帮助 |
| `pointer` | pointer.gif | 悬浮于连接上时，通常为手 |
| `progress` | progress.gif | 程序后台繁忙，用户仍可交互 (与`wait 相反`). |
| `wait` | wait.gif | 
 程序繁忙，用户不可交互
 (与`progress 相反`).图标一般为沙漏或者表。
  |
| 选择 | `cell` | cell.gif | 指示单元格可被选中 |
| `crosshair` | crosshair.gif | 交叉指针，通常指示位图中的框选 |
| `text` | text.gif | 指示文字可被选中 |
| `vertical-text` | vertical-text.gif | 指示垂直文字可被选中 |
| 拖拽 | `alias` | alias.gif | 复制或快捷方式将要被创建 |
| `copy` | copy.gif | 指示可复制 |
| `move` | move.gif | 被悬浮的物体可被移动 |
| `no-drop` | no-drop.gif | 
 当前位置不能扔下Firefox bug 275173Windows 或 Mac OS X 中
 "no-drop 与 not-allowed 相同".
  |
| `not-allowed` | not-allowed.gif | 不能执行 |
| `grab` | grab.gif | 可抓取
译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表 |
| `grabbing` | grabbing.gif | 抓取中 |
| 重设大小及滚动 | `all-scroll` | all-scroll.gif | 
 元素可任意方向滚动（平移）.Firefox bug 275174Windows
 中，"*all-scroll* 与 *move 相同*".
  |
| `col-resize` | col-resize.gif | 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头 |
| `row-resize` | row-resize.gif | 元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头 |
| `n-resize` | Example of a resize towards the top cursor | 某条边将被移动。例如元素盒的东南角被移动时`使用 se-resize` |
| `e-resize` | Example of a resize towards the right cursor |
| `s-resize` | Example of a resize towards the bottom cursor  |
| `w-resize` | Example of a resize towards the left cursor |
| `ne-resize` | Example of a resize towards the top-right corner cursor |
| `nw-resize` | Example of a resize towards the top-left corner cursor |
| `se-resize` | Example of a resize towards the bottom-right corner cursor |
| `sw-resize` | Example of a resize towards the bottom-left corner cursor |
| `ew-resize` | 3-resize.gif | 指示双向重新设置大小 |
| `ns-resize` | 6-resize.gif |
| `nesw-resize` | 1-resize.gif |
| `nwse-resize` | 4-resize.gif |
| 缩放 | `zoom-in` | zoom-in.gif | 指示可被放大或缩小 |
| `zoom-out` | zoom-out.gif |

### 语法形式
```

cursor =   
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ 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 ]    
  
<url> =   
  <url()>  |  
  <src()>    
  
<x> =   
  x    
  
<y> =   
  y    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

注意事项
----

尽管规范没有为游标定义任何大小限制，但是不同的user agents可能进行了限制。使用超出浏览器支持的大小范围的图像进行的光标更改通常只会被忽略。

查阅浏览器兼容性表格来获取指针大小的限制信息。

示例
--
```

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}
```

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # cursor |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using URL values for the cursor property
* `pointer-events`
* `url()` function
* Webkit's cursor demos (including the extended ones: `zoom`, `zoom-out`, `grab`, `grabbing`)
* Cursor Property (MSDN)
* CSS 2.1 and CSS 3 cursor propery test