CSS cursor attribute, csscursor attribute
Cursor1. definition and usage
The cursor attribute specifies the type (SHAPE) of the cursor to be displayed ).
This attribute defines the shape of the cursor used when the mouse pointer is placed within the boundary of an element (but CSS2.1 does not define which boundary determines the range ).
2. Attributes
| Url |
The URL of the custom optical indicator to be used. Note: always define a normal cursor at the end of this list to prevent any available cursor defined by the URL. |
| Default |
Default cursor (usually an arrow) |
| Auto |
Default value. The cursor set by the browser. |
| Crosshair |
The cursor is displayed as a cross line. |
| Pointer |
The cursor is a pointer indicating the Link (one hand) |
| Move |
This cursor indicates that an object can be moved. |
| E-resize |
This cursor indicates that the edge of the rectangle can be moved to the right (East. |
| Ne-resize |
This cursor indicates that the edge of the rectangle box can be moved up and right (North/East ). |
| Nw-resize |
This cursor indicates that the edge of the rectangle can be moved up and left (North/West ). |
| N-resize |
This cursor indicates that the edge of the rectangle box can be moved up (North. |
| Se-resize |
This cursor indicates that the edge of the rectangle box can be moved down and to the right (South/East ). |
| Sw-resize |
This cursor indicates that the edge of the rectangle can be moved down and left (South/West ). |
| S-resize |
This cursor indicates that the edge of the rectangle can be moved down (South ). |
| W-resize |
This cursor indicates that the edge of the rectangle can be moved to the left (West ). |
| Text |
This cursor indicates the text. |
| Wait |
This cursor indicates that the program is busy (usually a table or hourglass ). |
| Help |
This cursor indicates available help (usually a question mark or a balloon ). |
3. Supported browsers
All mainstream browsers support the cursor attribute.
Note: Opera 9.3 and Safari 3 are not supported.UrlValue.
Note: Internet Explorer (including IE8) of any version does not support attribute values "inherit ".
4.html code
<Html> <body> <p> move the mouse over a word to see the mouse pointer changes: </p> <span style = "cursor: auto "> Auto </span> <br/> <span style =" cursor: crosshair "> Crosshair </span> <br/> <span style =" cursor: default "> Default </span> <br/> <span style =" cursor: pointer "> Pointer </span> <br/> <span style =" cursor: move "> Move </span> <br/> <span style =" cursor: e-resize "> e-resize </span> <br/> <span style =" cursor: ne-resize "> ne-resize </span> <br/> <span style =" cursor: nw-resize "> nw-resize </span> <br/> <span style =" cursor: n-resize "> n-resize </span> <br/> <span style =" cursor: se-resize "> se-resize </span> <br/> <span style =" cursor: sw-resize "> sw-resize </span> <br/> <span style =" cursor: s-resize "> s-resize </span> <br/> <span style =" cursor: w-resize "> w-resize </span> <br/> <span style =" cursor: text "> text </span> <br/> <span style =" cursor: wait "> wait </span> <br/> <span style =" cursor: help "> help </span> </body>