English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The CSS cursor property specifies the type of cursor to be displayed when the pointer is placed over an element.
The following table provides usage instructions and version history for this property, as well as the syntax for using it in JavaScript scripts.
| Default value: | Common |
|---|---|
| Applies to: | All elements |
| Inheritance: | Yes |
| Animated by: | No.See also Animation properties. |
| Version: | CSS 2,3 |
| JavaScript syntax: | object.style.cursor="context-menu" |
cursor usage syntax
The syntax of this attribute is as follows: context-cursor: [url(address of cursor file),] 0 or more times | auto | default | none |-menu | help | pointer | progress | wait | cell | crosshair | text | vertical text |-alias | copy | move | no-drop | not Indicates that some edges need to move upward (northward).-allowed | grab | grabbing |-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | row ew-resize | w-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row Resize and scroll cursor-resize |-scroll | zoom-in | zoom
out | initial | inherit
Example1 h
{
cursor: url("custom.gif"), url("custom.cur"), default;
cursor: copy;
p {
cursor: url("custom.gif"), url("custom.cur"), default;
cursor: help;
a {
cursor: url("custom.gif"), url("custom.cur"), default;}/Test to see‹›
cursor attribute is used to specify a comma-separated list of user-defined cursor values followed by 'universal cursor'. That is, if the first cursor specified is incorrect or not found, the next cursor in the comma-separated list will be used, and so on, until an available cursor is found.If no user-defined cursor is valid or supported by the browser, the universal cursor at the end of the list will be used.
Attribute Value
| The following table describes the values of this attribute. | Value | View |
|---|---|---|
| Description | ||
| Common | auto | |
| The browser determines the cursor to be displayed based on the current context. For example, hovering over text. This is the default value. | default | |
| The default cursor of the platform, regardless of context, is usually an arrow. | none | |
| No cursor is displayed. | initial | |
| Sets this attribute to its default value. | inherit | |
| If specified, the associated element adopts the cursor attribute value of its parent element. | ||
| context-menu | Indicates that the context menu is available. | |
| help | Indicates helpful. | |
| pointer | pointer | |
| Indicates the cursor for a link, typically a hand with an extended finger. | progress | |
| Progress indicator. The program is performing some processing, but the user can still interact with the interface (different from wait). | wait | |
| Indicates that the program is busy and the user should wait. | ||
| Selection cursor | cell | |
| Indicates that a cell (or a group of cells) can be selected. | crosshair | |
| vertical | A simple crosshair. Typically used to indicate the selection in a bitmap. | |
| Indicates that selectable text, usually a beam, can be selected.-vertical | text | |
| Indicates that vertical text can be selected, that is, a horizontal beam. | ||
| Drag and drop cursor | alias | |
| Indicates that an alias or shortcut should be created. | copy | |
| Indicates that certain content can be copied. | move | |
| Indicates that the hovering object can be moved.-no | drop | |
| Indicates that the dragged item cannot be placed at the current position.-not | allowed | |
| Indicates that something cannot be completed. | ||
| Resize and scroll cursor-all | scroll | |
| Indicates that scrolling can be done in any direction (panning).-resize | col | |
| Indicates that columns can be adjusted horizontally in size.-resize | row | |
| Indicates that lines can be adjusted vertically in size.-resize | n | |
| Indicates that some edges need to move upward (northward).-resize | e | |
| Indicates that some edges will move rightward (eastward).-resize | s | |
| w-resize | Indicates that some edges need to move downward (southward). | |
| Indicates that some edges will move leftward (westward).-resize | ne/Indicates that some edges will move up and rightward (northward). | |
| nw-resize | Indicates that some edges need to move up and down (north)./west). | |
| se-resize | Indicates that some edges need to move leftward (southward)./Indicates that some edges need to move eastward). | |
| sw-resize | Indicates that some edges need to move up and down (south)./west). | |
| ew-resize | Indicates a bidirectional resize cursor. | |
| ns-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| Zoom cursor | ||
| zoom-in | Indicates that something can be zoomed in. | |
| zoom-out | Indicates that something can be zoomed out. | |
| grab | Indicates that something can be grabbed (dragged to move). | |
| grabbing | Indicates that something is being grabbed. | |
Browser compatibility of cursor attributes, the numbers in the table below indicate the minimum browser version that supports this attribute; all mainstream browsers support this attribute.
|
See tutorial:CSS cursor.