At some websites, you'll see different mouse cursors. This is set via the cursor property.
Below we list the commonly-seen cursors, as well as how they are declared. To view what a cursor looks like, just mouse over the "Result" column.
| CSS Declaration | Result |
| { cursor: crosshair; } | Mouse cursor is set to crosshair |
| { cursor: pointer; } | Mouse cursor is set to pointer |
| { cursor: text; } | Mouse cursor is set to text |
| { cursor: move; } | Mouse cursor is set to move |
| { cursor: wait; } | Mouse cursor is set to wait |
| { cursor: help; } | Mouse cursor is set to help |
| { cursor: progress; } | Mouse cursor is set to progress |
| { cursor: not-allowed; } | Mouse cursor is set to not-allowed |
| { cursor: no-drop; } | Mouse cursor is set to no-drop |
| { cursor: no-vertical-text; } | Mouse cursor is set to no-vertical-text |
| { cursor: all-scroll; } | Mouse cursor is set to all-scroll |
| { cursor: col-resize; } | Mouse cursor is set to col-resize |
| { cursor: row-resize; } | Mouse cursor is set to row-resize |
| { cursor: e-resize; } | Mouse cursor is set to e-resize |
| { cursor: ne-resize; } | Mouse cursor is set to ne-resize |
| { cursor: n-resize; } | Mouse cursor is set to n-resize |
| { cursor: nw-resize; } | Mouse cursor is set to nw-resize |
| { cursor: w-resize; } | Mouse cursor is set to w-resize |
| { cursor: sw-resize; } | Mouse cursor is set to sw-resize |
| { cursor: s-resize; } | Mouse cursor is set to s-resize |
| { cursor: se-resize; } | Mouse cursor is set to se-resize |
We can also specify a custom image for the mouse cursor. The syntax for doing this is:
{ cursor: url(image_url); }
Tweet
0 comments:
Post a Comment