HTML cursor style and cursor Style
HTML cursor Style
| Cursor: auto; | Automatic |
| Cursor: all-scroll; | Scroll up or down any direction |
| Cursor: crosshair; | Cross Accuracy |
| Cursor: pointer; | Hand |
| Cursor: wait; | Wait |
| Cursor: help; | Help |
| Cursor: no-drop; | Cannot be released |
| Cursor: text; | Text/editing |
| Cursor: move; | Movable object |
| Cursor: vertical-text; | Editable vertical text cursor |
| Cursor: n-resize; | Up (North) |
| Cursor: s-resize; | Change the size down (South) |
| Cursor: e-resize; | Change the size to the right (East) |
| Cursor: w-resize; | Change the size to the left (West) |
| Cursor: ne-resize; | Change the size (North East) from top to right) |
| Cursor: nw-resize; | Change the size (North West) to the left) |
| Cursor: se-resize; | Change the size down to the right (South East) |
| Cursor: sw-resize; | South West) |
| Cursor: col-resize; | Horizontally changeable size |
| Cursor: row-resize; | Vertical dimension change |
| Cursor: not-allowed; | Disable |
| Cursor: progress; | Processing |
| Cursor: default; | System Default |
Cursor: url ('#'); # indicates the address of the cursor file. (Note that the file format must be. cur or. ani) |
Custom (animation available) Note: After a custom cursor is defined, add a general cursor to the end, In case that the cursor defined by the url cannot be used |
Note:
Cursor attribute: Set the type (SHAPE) of the displayed cursor ).
This attribute can have multiple values separated by commas;
If the first value cannot be found but cannot be displayed, the second value will be used, and so on;
If all values are unavailable, this attribute will not work and the cursor will not be changed.
For example: {cursor: pointer, wait, help;}, from pointer to wait, and then to help. If it is not applied, the cursor attribute does not play any role.
Here is an example of a "hand" cursor:
:
| Cursor: pointer; | Hand |
The first is the intra-row style: (intra-row style: Write the CSS style in the tag)
<Table border = "1"> <tr class = "pointer" style = "cursor: pointer;"> <td> cursor: pointer; </td> <td> hand </td> </tr> </table>
The second is internal style: (internal style: Located in
<! -- Here is the content in the style --> <style type = "text/css">. pointer: hover {cursor: pointer ;}</style> <! -- The content in the body --> <body> <table border = "1"> <tr class = "pointer"> <td> cursor: pointer; </td> <td> hand </td> </tr> </table> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
